动画效果:
<template>
<div>
<button @click="isShow =!isShow">显示/隐藏</button>
<transition name="hello" appear="true">
<!--appear="true":一开始也会有启动动画-->
<h1 v-show="isShow">Hello!</h1>
</transition>
</div>
</template>
<script>
export default {
name:'T-ests',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: pink;
}
.hello-enter-active{
/*动画名字是固定的,如果transition的name属性更改了,
这里的v-也要改为对应的name-*/
animation: Gui 1s;
}
.hello-leave-active{
animation: Gui 1s reverse;
}
@keyframes Gui {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
过渡效果:
<template>
<div>
<button @click="isShow =!isShow">显示/隐藏</button>
<transition name="hello" appear="true">
<!--appear="true":一开始也会有启动动画-->
<h1 v-show="isShow">Hello!</h1>
</transition>
</div>
</template>
<script>
export default {
name:'T-ests',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: pink;
/*transition: 0.5s linear;*/
}
.hello-enter,.hello-leave-to{
/*进入的起点*/
transform: translateX(-100%);
}
.hello-enter-active,.hello-enter-active{
transition: 0.5s linear;
}
.hello-enter-to,.hello-leave{
/*终点*/
transform: translateX(0px);
}
</style>
多个元素:
<transition-group name="hello" appear="true">
<!--appear="true":一开始也会有启动动画-->
<h1 v-show="isShow" key="1">Hello-</h1>
<h1 v-show="isShow" key="1">Gui!</h1>
</transition-group>
动画元素参考网站:
http://npmjs.com/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"
>
<!--appear="true":一开始也会有启动动画-->
<h1 v-show="isShow" key="1">Hello-</h1>
<h1 v-show="isShow" key="1">Gui!</h1>
</transition-group>
</div>
</template>
<script>
import 'animate.css'
export default {
name:'T-ests',
data(){
return{
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: pink;
}
</style>
## Vue封装的过度与动画
1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
2. 图示:<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105"style="width:60%" />
3. 写法:
1. 准备好样式:
- 元素进入的样式:
1.v-enter:进入的起点
2.v-enter-active:进入过程中
3.v-enter-to:进入的终点
- 元素离开的样式:
1.v-leave:离开的起点
2.v-leave-active:离开过程中
3.v-leave-to:离开的终点
2. 使用```<transition>```包裹要过度的元素,并配置name属性:
```vue
<transition name="hello">
<h1v-show="isShow">你好啊!</h1>
</transition>
```
3. 备注:若有多个元素需要过度,则需要使用:```<transition-group>```,且每个元素都要指定```key```值。