使用<transition></transition>给vue中dom原始加入css过渡动画
enter-active和leave-active
enter-active是控制载入时的样式名的后缀
leave-active 是控制消失时的样式名的后缀
<style>
.animation-enter-active{
animation: aaa 1.5s;
} /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
.animation-leave-active{
animation: aaa 1.5s reverse;
}
@keyframes aaa{
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
</style>
单个元素过渡
<transition></transition>是vue自带的
通过属性name=样式名 来给其内的HTML标签添加过渡动画,vue会自动的根据dom元素改变从而添加载入动画和消失动画
appear 加上后会在第一次加载dom元素时就加载过渡动画
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
.animation-enter-active{
animation: aaa 1.5s;
} /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
.animation-leave-active{
animation: aaa 1.5s reverse;
}
@keyframes aaa{
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
</style>
</head>
<body>
<div id="box">
<button @click="isShow = !isShow">click</button>
<transition name="animation" appear> <!-- transition 为vue中的dom添加样式 appear 为初始的时候就加入动画, 就是刷新页面
transition 里面只能存在一个同级的根标签, -->
<div v-show="isShow">000000000000000000000000000</div>
</transition>
</div>
<script>
new Vue({
el:"#box",
data:{
isShow:true
}
})
</script>
</body>
</html>
多元素的过滤
- transition 里面只能存在一个同级的根标签,
-
<transition name="animation" appear> <div v-if="isShow">000000000000000000000000000</div> <div v-else>111111111111111111111111</div> </transition> - 如果这样写, 根据vue的diff算法, vue 只会改变标签内的的值, 而不会重新渲染出一个dom
- 只有在改变dom的时候, 动画才会加载,如果想要这样写要加一个唯一 key, 这个key只要不同就可
代码示例:
<body>
<div id="box">
<button @click="isShow = !isShow">click</button>
<transition name="animation" appear>
<div v-if="isShow" key="000">000000000000000000000000000</div>
<div v-else key="111">111111111111111111111111</div>
</transition>
</div>
<script>
new Vue({
el:"#box",
data:{
isShow:true
}
})
</script>
</body>
列表过渡 transition-group
<transition-group>不同于transition, 它会以一个真实的标签呈现: 默认是为一个是<span>标签, 可以通过 tag 更换其他标签- 代码演示
<body>
<div id="box">
<input type="text" v-model="name" >
<button @click="handleAdd">add</button>
<!-- <ul> -->
<!-- <transition-group>不同于transition, 它会以一个真实的标签呈现: 默认是为一个是<span>标签, 可以通过 tag 更换其他标签--->
<transition-group tag="ul" name="animation">
<li v-for=" item in list" :key="item"> {
{ item }} </li>
</transition-group>
<!-- </ul> -->
</div>
<script>
new Vue({
el:"#box",
data:{
name:"",
list:[]
},
methods:{
handleAdd(){
console.log("记得加入不同的",this.name)
console.log(this.list)
this.list.push(this.name)
this.name=''
}
}
})
</script>
</body>