学习vue第十节,使用过渡类名实现动画
Posted shangrao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习vue第十节,使用过渡类名实现动画相关的知识,希望对你有一定的参考价值。
自定义两组样式,来控制 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>
以上是关于学习vue第十节,使用过渡类名实现动画的主要内容,如果未能解决你的问题,请参考以下文章