- 操作 css 的 trasition 或 animation
- vue 会给目标元素添加/移除特定的 class
- 过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
- 在目标元素外包裹<transition name="xxx">
- 定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 显示， 隐藏的过渡效果*/
.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;
transform: translateX(20px);
}
</style>
</head>
<body>
<div id="demo">
<button @click="isShow=!isShow">toggle</button>
<transition name="xxx">
<p v-show="isShow">沈聪</p>
</transition>
</div>
<div id="demo1">
<button @click="isShow=!isShow">toggle</button>
<transition name="move">
<p v-show="isShow">沈聪</p>
</transition>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
isShow:true
}
})
new Vue({
el:'#demo1',
data:{
isShow:true
}
})
</script>
</html>
