微信官方网站下载,无锡惠山区建设局网站,旧房翻新装修,微信小程序展示网站建设多少钱目录 1. Vue封装的过度与动画1.1 动画效果11.2 动态效果21.3 使用第三方动画库animate.css 1. Vue封装的过度与动画
作用#xff1a;在插入、更新或移除DOM元素时#xff0c;在合适的时候给元素添加样式类名
1.1 动画效果1
Test1.vue:
transition内部只能包含一个子标签。… 目录 1. Vue封装的过度与动画1.1 动画效果11.2 动态效果21.3 使用第三方动画库animate.css 1. Vue封装的过度与动画
作用在插入、更新或移除DOM元素时在合适的时候给元素添加样式类名
1.1 动画效果1
Test1.vue:
transition内部只能包含一个子标签。包裹要过渡的元素。基本原理是Vue会在合适的时候自动给子标签添加不同的class样式属性使用了name属性就可以分别控制多个动画了appear属性第一次显示的时候就有动画效果。相当于:appeartrue
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition nametrans1 appearh1 v-showisShow你好啊/h1/transition/div
/templatescriptexport default {name:Test1,data() {return {isShow:true}}}
/scriptstyle scopedh1{background-color: orange;}!-- 元素进入过程中 --.trans1-enter-active{animation: myFlash 0.5s linear;}!-- 元素离开过程中 --.trans1-leave-active{animation: myFlash 0.5s linear reverse;}!-- 准备的动画 --keyframes myFlash {from{transform: translateX(-100%);}to{transform: translateX(0px);}}
/style动画效果静态时如下
1.2 动态效果2
Test2.vue
有多个元素需要过度可以使用transition-group且每个元素都要指定key值
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition-group nametrans1 appearh1 v-show!isShow key1你好啊/h1h1 v-showisShow key2jack/h1/transition-group/div
/templatescriptexport default {name:Test2,data() {return {isShow:true}}}
/scriptstyle scopedh1{background-color: orange;}/* 进入的起点、离开的终点 */.trans1-enter,.trans1-leave-to{transform: translateX(-100%);}/* 进入的终点、离开的起点 */.trans1-enter-to,.trans1-leave{transform: translateX(0);}.trans1-enter-active,.trans1-leave-active{transition: 0.5s linear;}
/style动画效果静态时如下
1.3 使用第三方动画库animate.css
使用cnpm install animate.css安装第三方动画库。想要更多可以去https://www.npmjs.com/进行搜索。还要另外两种方式引入animate.css文件
直接下载animate.css文件放到src/assets/css路径下然后通过import ./assets/css/animate.css进行引入直接下载animate.css文件放到public/css路径下然后在index.html页面中通过style relstylesheet href% BASE_URL %css/animate.css/style进行引入
Test3.vue直接在transition-group指定属性就可以了。指定的属性可以去https://animate.style/官网去查看
templatedivbutton clickisShow !isShow显示/隐藏/buttontransition-group appearnameanimate__animated animate__bounce enter-active-classanimate__swingleave-active-classanimate__backOutUph1 v-show!isShow key1你好啊/h1h1 v-showisShow key2jack/h1/transition-group/div
/templatescriptimport animate.cssexport default {name:Test3,data() {return {isShow:true}}}
/scriptstyle scopedh1{background-color: orange;}/style动画效果静态时如下
