吉恩聊城网站建设,二级分销佣金分配表,东莞常平美食,建瓯做网站的公司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
