<!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<style type="text/css">
/*必须所有的元素 或者属性 0.3s 以ease的形式*/
.show-enter-active, .show-leave-active{
transition:all 1s ease;
padding-left: 10px;
}
/*.show-enter 定义进入的开始状态*/
/*.show-leave 定义离开的结束状态*/
.show-enter, .show-leave-active{
padding-left: 100px;
}
<!--使用动画步骤:
1.在需要进行动画控制的元素增加 transition=‘自定义‘
2.利用三个样式控制
-->
</style>
</head>
<body>
<div id="app">
<button @click="toggle">显示和隐藏数据</button>
<br>
<transition name="show"><!-- 名称和定义的样式 名称前缀一样-->
<span v-show="isShow" >hello vuejs</span>
</transition>
</div>
<script src="vue.js"></script>
<script src="vue-resource1.5.1.js"></script>
<script type="text/javascript">
new Vue({
el:‘#app‘,
data:{
isShow:false
},
methods:{
toggle:function(){
this.isShow=!this.isShow;
}
}
});
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9513321.html
时间： 2024-09-28 20:25:49