vue的动画需要先写transition并且指定name,然后用name拼接一个固定字符串来表示样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*显示隐藏的过度 用1秒时间显示和隐藏*/
.XXX-enter-active, .XXX-leave-active {
transition: opacity 1s
}
/*隐藏的样式*/
.XXX-enter, .XXX-leave-to {
opacity: 0;
}
.move-enter-active{
transition: all 1s
}
.move-leave-active {
transition: all 3s
}
/*隐藏的样式*/
.move-enter, .move-leave-to {
opacity: 0;
/*向右偏移20px*/
transform: translateX(20px);
}
</style>
</head>
<body>
<div id="test">
<button @click="isShow=!isShow">toggle</button>
<transition name="XXX">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="test1">
<button @click="isShow=!isShow">toggle</button>
<transition name="move">
<p v-show="isShow">hello</p>
</transition>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#test',
data(){
return {
isShow: true,
}
}
})
new Vue({
el: '#test1',
data(){
return {
isShow: true,
}
}
})
</script>
</html>