Vue使用过渡类名实现动画和自定义前缀
1.效果演示
image
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-active
1.效果演示:
image
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.10.28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录