动画2——自定义过渡类名前缀（v-）
2019-04-18 本文已影响0人
小丘啦啦啦
一、说明
单纯的transition内的元素动画效果会公用一套过渡类（即v-开头的6种过渡类），有时候需要不同元素实现不同的动画效果，则需要自定义修改v-前缀形成不同元素的各自过渡类。
二、自定义v-前缀
- 给
transition加一个name属性，自定义值。 - 则形成了新的过渡类，以自定义name的值为前缀，适用于此类
transition内容。
三、实例
点击两个按钮可以实现不同完整动画效果。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
/* 公共的过渡类，v-开头 */
.v-enter,.v-leave-to{
opacity:0;
transform: translate(100px);
}
.v-enter-active,
.v-leave-active{
transition : all 0.4s ease;
}
/* 自定义的过渡类，transition的name值开头 */
.my-enter,.my-leave-to{ /* 动画进入前和离开后的元素状态 */
opacity:0;
transform: translateY(100px);
}
.my-enter-active, /* 入场和离场动画时间段 */
.my-leave-active{
/* 设置时间,那些元素实现动画变化等的过渡 */
transition : all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="转化1" @click="flag1 = !flag1"/>
<input type="button" value="转化2" @click="flag2 = !flag2"/>
<transition>
<h3 v-if="flag1">我是一句话</h3>
</transition>
<transition name="my">
<h3 v-if="flag2">我是一句话</h3>
</transition>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag1:false,
flag2:false,
}
});
</script>
</body>
</html>
不同transition内容实现不同动画效果。
