开发者学堂课程【Vue.js 入门与实战：动画-自定义v-前缀】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8165
动画-自定义v-前缀
一、v-前缀的使用方法以及前缀的作用
示例代码：
<title>Document</title> <script src=" ./lib/vue-2.4.0.js"></script> <!-- 2．自定义两组样式，来控制transition内部的元素实现动画--> <style> /* v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/ /* v-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了*/ .v-enter, .v-leave-to { //特有的样式来实现动画 opacity : 0; transform: translatex(150px); } /*v-enter-active【入场动画的时间段】*/ /* v-leave-active【离场动画的时间段】*/ .v-enter-active, .v-leave-active{ //无论是h3或者是h6都是共用这个类 transition: all 0.8s ease; </style> </head> <body> <div id="app"> <input type "button" value "toggle" Cclick="flag-!flag"> <!--需求:点击按钮，让h3 显示，再点击，让h3隐藏--> <!-- 1，使用transition元素，把需要被动画控制的元素，包裹起来--> <!-- transition元素，是Vue官方提供的--> <tranaition> //tranaition默认必须要带一个v-前缀 h3 v-if-"flag">这是一个H3</h3> </ transition> </div> <hr> <input type="button" value="toggle2" @click="flag=!flag2"> <transition> h6 v-if-"flag2">这是一个H6</h6> </transition> </div> <script> //创建vue实例，得到viewModelvar var = new Vue({ el: '#app' , data:{ flag: false}, //flag控制上方h3 flag2:false //flag2控制上方h6 methods:{} }); </acript> </body>
执行代码并打开网址展现如下效果：
点击toggle呈如下效果:“这是一个H3”从右到左出现
再次点击toggle,”这是一个H3”从左到右消失。
点击toggle2:
“这是一个H6”从右到左出现
再次点击toggle2,”这是一个H6”从左向右消失。
示例2：
//如果需要让flag2单独执行一个动画，则它与h3就无法公用一个类。 <tranaition name "my"> h6 v-if="flag2">这是一个H6</h6> </ transition> //前缀不再是v-，而是my- .my-enter, .my-leave-to { opacity : 0; //opacity还可以从0开始渐变 transform: translateY(70px); } .my-enter-active, .my-leave-active{ transition: all 0.8s ease; }
点击toggle2按钮，呈现以下效果：
“这是一个H6”从下到上出现：
再次点击toggle2,“这是一个H6”从上到下消失。
前缀的作用：能够区分不同组织间的动画。
