vue动画
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
transform:translateX(150px) ;
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag" >
<transition>
<!-- 注意要操作的动画 需要使用transition包裹 -->
<h3 v-if="flag">这是一个h3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{},
})
</script>
</body>
</html>
同时可以在transition上面添加name 在自定义动画
对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。
image.png
网友评论