vue 使用第三方animate css动画

淡淡的烟草味﹌ 2022-04-10 05:11 205阅读 0赞

animate css官网: [https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css]

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
       
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       
       <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css" rel="stylesheet">
    </head>
    <body>
    	<div id = "app">
    		
    		<input type="button" value ="动画" @click="flag=!flag">
    		<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter:200, leave:400 }">
    			<h3 v-show="flag" class="animated" >this is  the word;</h3>
    		</transition>
    		
    	</div>
    	<script type="text/javascript"> var vue = new Vue({ el:"#app", data:{ flag:false } }); </script>
    </body>
    </html>

[https_daneden.github.io_animate.css]: https://daneden.github.io/animate.css/

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 41 Vue使用第三方动画库

\[动画\] 如何在Vue中使用第三方动画库 Animate.css 阐述自定义动画选择方法一：给 transition 标签一个 name

小咪咪/ 2023年10月06日 20:42/ 0 赞/ 15 阅读

相关 uni-app 使用动画 css 库(Animate) Animate.css

新手uni-app引入css3动画Animate.css库，animate.css是一堆很酷，有趣且跨浏览器的动画，供您在项目中使用。非常适合强调，主页，滑块和一般的加水效果，

心已赠人/ 2023年06月30日 15:54/ 0 赞/ 78 阅读

相关学习VUE第十三天课程（VUE之组件（VUE之动画与animate.css动画库））

VUE之动画与animate.css动画库 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用

本是古典何须时尚/ 2023年06月12日 04:21/ 0 赞/ 14 阅读

相关 Vue之动画与animate.css动画库

前言 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使

左手的ㄟ右手/ 2023年06月12日 04:19/ 0 赞/ 190 阅读

相关 Vue3---Vue3中使用动画(Animate.css)

安装Animate.css npm install animate.css main.js文件中引入Animate.css import "a

小鱼儿/ 2022年09月11日 05:21/ 0 赞/ 586 阅读

相关【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且

╰半橙微兮°/ 2022年07月13日 08:14/ 0 赞/ 286 阅读

相关 vue 使用第三方animate css动画

animate css官网: [https://daneden.github.io/animate.css/][https_daneden.github.io_animate.

淡淡的烟草味﹌/ 2022年04月10日 05:11/ 0 赞/ 206 阅读

相关 Vue过渡动画 transition结合animate.css使用

第一步.引用 animate.css文件第二步.定义动画名字，如下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

小鱼儿/ 2022年03月11日 08:16/ 0 赞/ 334 阅读

相关 Vue - Vue中使用 transition 过渡动画、Animate.css 库动画

Vue 中使用过渡动画一. transition 二. Vue 中使用 @keyframes 1. @keyframes 的使用

﹏ヽ暗。殇╰゛Y/ 2021年07月25日 17:15/ 0 赞/ 863 阅读

相关 CSS Animations 动画

包含所有前缀的`CSS`关键帧。您需要做的就是选择一个动画并在`CSS`动画中使用它。 animations.css .animationStart{

小咪咪/ 2021年07月04日 16:12/ 0 赞/ 542 阅读