Vue过渡动画
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
opacity: 0
}
/*显示过渡效果 持续1s钟*/
.meng-enter-activeP{
/*all 所有效果 持续1s*/
transition: all 1s;
}
/*隐藏过渡效果 5s */
.meng-leave-active{
/*所有效果 持续5s*/
transition: all 5s;
}
/*显示前或隐藏后的效果*/
.meng-enter,.meng-leave-to{
/*都是隐藏效果*/
opacity:0;
/*水平方向 移动10px*/
transform: translateX(10px);
}
</style>
<body>
<!--
{{js表达式}}
-->
<div id="app">
<button @click="show = !show">渐变效果</button>
<transition name="fade">
<p v-show="show" v-bind:style = "styleobj">uniapp</p>
</transition>
</div>
<div id="app2">
<button @click="show = !show">平滑过渡</button>
<transition name="meng">
<p v-show="show" v-bind:style = "styleobj">uniapp</p>
</transition>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods:{
}
});
var vm = new Vue({
el:'#app2',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods:{
}
});
</script>