标签：round lag ext css html lib script 实现 var
自定义两组样式，来控制 transition 内部的元素实现动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> /* 动画四个阶段1234 默认v- 1-- v-enter 进入动画前（动画还未开始） 4-- v-leave-to 离开动画后(动画终止) */ .v-enter,.v-leave-to{ opacity: 0; transform: translateY(80PX); } /* 2-- v-enter-active 入场动画时间段 3-- v-leave-active 出场动画时间段 */ .v-enter-active,.v-leave-active{ transition: all 0.8s ease; } /* 自定义动画class */ .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80PX); } .my-enter-active,.my-leave-active{ transition: all 0.8s ease; } </style> </head> <body> <div id="app"> <button type="button" @click="flag=!flag">显示隐藏</button> <!-- transition:将动画元素包裹起来 ,使用v-前缀 --> <transition> <h3 v-if="flag">我是一个v-动画效果</h3> </transition> <!--name： 指定动画前缀 --> <transition name="my"> <h3 v-if="flag">我是一个自定义动画效果</h3> </transition> </div> <script type="text/javascript"> var vm=new Vue({ el:‘#app‘, data:{ flag:"true" }, methods:{ } }) </script> </body> </html>
标签：round lag ext css html lib script 实现 var
原文地址：https://www.cnblogs.com/shangrao/p/13021417.html
