vue animate.css,vue css动画
本文主要介绍在vue中使用animate.css实现动画效果。我们只需要写一点代码就可以实现非常酷的动画效果。感兴趣的朋友可以跟随边肖去看一看。
:
目录
1.安装(在vscode终端中，使用npm安装)2。导言3。代码实现animate.css是国外的CSS3动画库，提供了shake、flash、bounce、flip、rotateIn/rotateOut这些效果在大多数支持CSS3的浏览器中是一致的。简单来说，我们可以使用它，只需要写一点代码就可以实现非常酷的动画效果。
https://animate.style/,官方网站
1.安装（在vscode终端中，使用npm安装）
npm安装动画. css
2.引入
在Test.vue中引入
导入 animate.css
3.代码实现
Test.vue文件如下所示：
模板
差异
button @click=isShow=！是“显示/隐藏/按钮”
！-
服装：一上来就有动画效果。
Enter-active-class:设置输入的动画。
Leave-active-class:设置离开的动画。
-
！-过渡
出现
name= animate _ _ animate animate _ _ bounce
enter-active-class= animate _ _ slide inup
leave-active-class= animate _ _ zoom out
h2 v-show=isShowanimate.css！/h2
/过渡-
过渡组
出现
name= animate _ _ animate animate _ _ bounce
enter-active-class= animate _ _ swing
leave-active-class= animate _ _ back outp
h2 v-show=！是 key= 1 喂！/h2！-一定要调好钥匙-
h2v-show= is show key= 2 animate . CSS！/h2
/过渡-组
/div
/模板
脚本
导入 animate.css
导出默认值{
名称：“测试3”，
data(){
返回{
isShow:没错
}
}
}
/脚本
样式范围
h2{
背景色：天蓝色；
}
/风格
只需在App.vue中注册并使用Test.vue即可
模板
差异
测试/
/div
/模板
脚本
从导入测试。/组件/测试
导出默认值{
名称：“应用程序”，
组件：{测试}
}
/脚本
风格
/风格
注意：
要使用animate.css，您需要用transition包装相关的标签./transition，并且只能包装一个标记。您可以使用过渡组来包装多个标签./过渡-组。注意一定要加上key的属性值，也就是说一上来就有动画效果。相当于：apparent= true 自定义修改。
可以从进出官网选择自己喜欢的动漫。点击上图中的红框标识进行复制，直接替换下图中的红框内容。
5.使用：duration设置动画的统一运行时间，单位：ms
！-
入场和离场的运行时间是一样的。
时间单位：毫秒
过渡：持续时间=1000 ./过渡
-
过渡
出现
name= animate _ _ animate animate _ _ bounce
enter-active-class= animate _ _ slide inup
leave-active-class= animate _ _ zoom out
:持续时间=1000
h2 v-show=isShowanimate.css！/h2
/过渡
！-
分别设置进入和离开的运行时间。
过渡：持续时间={进入：500，离开：800 } ./过渡
-
过渡
出现
name= animate _ _ animate animate _ _ bounce
enter-active-class= animate _ _ slide inup
leave-active-class= animate _ _ zoom out
:duration={ enter:200，leave:1500 }
h2 v-show=isShowanimate.css！/h2
/过渡
关于使用animate.css在vue中实现动画效果的这篇文章到此结束，关于使用animate.css在vue中实现动画效果的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。