动画-自定义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”从上到下消失。
前缀的作用：能够区分不同组织间的动画。
