深圳大型网站建设,沽源网站建设案例,中国建设网官方网址,网站备案 互联网信息查询Test.vue:元素外面包一层transition#xff0c;展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果#xff0c;appear上来默认展示动画效果 templatedivbutton clickisShow !isShow显示/隐藏/butto… Test.vue:元素外面包一层transition展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果appear上来默认展示动画效果 templatedivbutton clickisShow !isShow显示/隐藏/button !--元素外面包一层transition展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果appear上来默认展示动画效果--transition appearh1 v-showisShow你好啊/h1/transition/div /templatescript export default {name: MyTest,data(){return{isShow:true}} } /scriptstyle scopedh1{background-color: orange;}.v-enter-active{animation: liner 0.5s linear;}.v-leave-active{animation: liner 0.5s linear reverse;}/*这里定义的liner名称随便供上面animation用*/keyframes liner {from{transform: translateX(-100%);}go{transform: translateX(0px);}} /style Test2.vue :  多条数据需要用transition-group展示name属性与style里面的要一样多条数据需要设置key值 templatedivbutton clickisShow !isShow显示/隐藏/button !--多条数据需要用transition-group展示name属性与style里面的要一样多条数据需要设置key值--transition-group namehello appearh1 v-show!isShow key1你好啊/h1h1 v-showisShow key2liner/h1/transition-group/div /templatescript export default {name: MyTest,data(){return{isShow:true}} } /scriptstyle scopedh1{background-color: orange;}/*进入的起点离开的终点*/.hello-enter,.hello-leave-to{transform: translateX(-100%);}/*进入的终点离开的起点*/.hello-enter-to,.hello-leave{transform: translateX(0);}/*进入离开的动作过程触发效果*/.hello-enter-active,.hello-leave-active{transition: 0.5s linear;} /style Test3.vue :  安装第三方样式库animate.css npm install animate.css 先导入import animate.css多条数据transition-groupname用的animate.css库中的name进出离开效果自动触发enter-active-class和leave-avtive-class绑定的效果 templatedivbutton clickisShow !isShow显示/隐藏/button !--多条数据transition-groupname用的animate.css库中的name进出离开效果自动触发enter-active-class和leave-avtive-class绑定的效果--transition-groupnameanimate__animated animate__bounceappearenter-active-classanimate__swingleave-active-classanimate__bounceOutUph1 v-show!isShow key1你好啊/h1h1 v-showisShow key2liner/h1/transition-group/div /templatescript import animate.css export default {name: MyTest,data(){return{isShow:true}} } /scriptstyle scopedh1{background-color: orange;}/style