Vue 过渡动画 单个元素与多个元素过渡 集成第三方过渡动画
单个元素过渡
<template>
<div class="header">
<button @click="toggle">显示/隐藏</button>
<transition name="island" appear>
<div v-show="isShow" class="line" >我来了</div>
</transition>
</div>
</template>
<script>
export default {
props: ["addTodo"],
data: () => ({ isShow: true }),
methods:{
toggle(){
this.isShow = !this.isShow
}
}
};
</script>
<style scoped>
.line {
400px;
height: 50px;
background: rgb(224, 224, 65);
font-size: 20px;
line-height: 50px;
margin-top: 20px;
}
/* 进入过程中激活 */
.island-enter-active{
animation: island 0.5s linear;
}
/* 离开过程中激活 */
.island-leave-active{
animation: island 1s linear reverse;
}
@keyframes island {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0);
}
}
</style>
<template>
<div class="header">
<button @click="toggle">显示/隐藏</button>
<transition name="island" appear>
<div v-show="isShow" class="line">我来了</div>
</transition>
</div>
</template>
<script>
export default {
props: ["addTodo"],
data: () => ({ isShow: true }),
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
};
</script>
<style scoped>
.line {
400px;
height: 50px;
background: rgb(224, 224, 65);
font-size: 20px;
line-height: 50px;
margin-top: 20px;
}
/* 进入的起点,离开的终点*/
.island-enter,
.island-leave-to {
transform: translateX(-100%);
}
/* 进入、离开激活时添加动画 */
.island-enter-active,.island-leave-active{
transition: 0.5s linear;
}
/* 进入的终点,离开的起点 */
.island-enter-to,
.island-leave{
transform: translateX(0);
}
</style>
多个元素过渡
transition-group
<template>
<div class="header">
<button @click="toggle">显示/隐藏</button>
<transition-group name="island" appear>
<div v-show="isShow" class="line" :key="1">我来了</div>
<div v-show="isShow" class="line" :key="2">我来了2</div>
</transition-group>
</div>
</template>
<script>
export default {
props: ["addTodo"],
data: () => ({ isShow: true }),
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
};
</script>
<style scoped>
.line {
400px;
height: 50px;
background: rgb(224, 224, 65);
font-size: 20px;
line-height: 50px;
margin-top: 20px;
}
/* 进入的起点,离开的终点*/
.island-enter,
.island-leave-to {
transform: translateX(-100%);
}
/* 进入、离开激活时添加动画 */
.island-enter-active,.island-leave-active{
transition: 0.5s linear;
}
/* 进入的终点,离开的起点 */
.island-enter-to,
.island-leave{
transform: translateX(0);
}
</style>
集成第三方库animate.css
npm i animate.css
import 'animate.css'
<template>
<div class="header">
<button @click="toggle">显示/隐藏</button>
<transition
appear
name="animate__animated animate__bounce"
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutRight"
>
<div v-show="isShow" class="line">我来了</div>
</transition>
</div>
</template>
<script>
import "animate.css";
export default {
props: ["addTodo"],
data: () => ({ isShow: true }),
methods: {
toggle() {
this.isShow = !this.isShow;
},
},
};
</script>
<style scoped>
.line {
400px;
height: 50px;
background: rgb(224, 224, 65);
font-size: 20px;
line-height: 50px;
margin-top: 20px;
}
</style>