24_过渡与动画
动画效果
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition :appear="true">
<!-- 让他一出来就出现动画 -->
<h1 v-show="isShow" >你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow:true
};
},
};
</script>
<style scoped>
h1 {
background-color: orange;
}
/* <transition name="hello">
对应 .hello-enter-active
*/
.v-enter-active {
animation: atguigu 1s;
}
.v-leave-active{
animation: atguigu 1s reverse;
}
@keyframes atguigu {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px)
}
}
</style>
过渡实现
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="hello" :appear="true">
<!-- 让他一出来就出现动画 -->
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow:true
};
},
};
</script>
<style scoped>
h1 {
background-color: orange;
}
/* 进入的起点 ,离开的终点 */
.hello-enter, .hello-leave-to {
transform: translateX(-100%);
}
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
/* 进入的终点,离开的起点 */
.hello-enter-to,.hello-leave {
transform: translateX(0px);
}
</style>
多个元素过渡
<transition-group name="hello" :appear="true">
<h1 v-show="!isShow" key="1" >你好啊</h1>
<h1 v-show="isShow" key="2" >你好啊</h1>
</transition-group>
集成第三方的库
npm install animate.css
代码演示
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group name='animate__animated animate__bounce'
:appear="true"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
>
<h1 v-show="!isShow" key="1" >你好啊</h1>
<h1 v-show="isShow" key="2" >你好啊111</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name: 'Test',
data() {
return {
isShow:true
};
},
};
</script>
<style scoped>
h1 {
background-color: orange;
}
</style>