正文
Vue使用过渡类名实现动画和自定义前缀
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Vue使用过渡类名实现动画和自定义前缀1.效果演示
2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script> <!--2.自定义两种样式 控制transition实现内部动画-->
<style>
/*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/
/*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
} /*v-enter-active [入场动画的时间段]*/
/*v-leave-active [离场动画的时间段]*/
.v-enter-active,
.v-leave-active{ transition: all 0.4s ease;
} </style></head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flage=!flage">
<!--//点击h3显示 再点击隐藏--> <!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->
<transition>
<h3 v-if="flage">这是一个h3</h3>
</transition>
</div><script> var vm = new Vue({
el: "#app",
data: {
flage: false
},
methods: {}
})</script>
</body>
</html>
自定义前缀.my-enter-active1.效果演示:
2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> <!--2.自定义两种样式 控制transition实现内部动画-->
<style>
/*[这是一个时间点]v-enter是进入前元素的起始状态 还没开始进入*/
/*[这也是一个时间点]v-leave-to是动画离开之后的终止状态,此时元素动画已经结束了*/
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
} /*v-enter-active [入场动画的时间段]*/
/*v-leave-active [离场动画的时间段]*/
.v-enter-active,
.v-leave-active{ transition: all 0.4s ease;
} /*=============*/ .my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(70px);
} .my-enter-active,
.my-leave-active{ transition: all 0.8s ease;
}
</style></head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flage=!flage">
<!--//点击h3显示 再点击隐藏-->
<!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->
<transition>
<h3 v-if="flage">这是一个H3</h3>
</transition><hr>
<input type="button" value="toggle2" @click="flage2=!flage2">
<!--//点击h3显示 再点击隐藏-->
<!--1.使用transition 元素 吧需要被动画控制的元素包裹起来-->
<transition name="my">
<h6 v-if="flage2">这是一个H6</h6>
</transition>
</div><script> var vm = new Vue({
el: "#app",
data: {
flage: false,
flage2: false
},
methods: {}
})</script>
</body>
</html>
