目录
动画效果
transition意思是过渡,在vue中可以实现动画效果和过渡效果
- 如果在transition后面加上name="hello"类似的, .v-enter-active .v-leave-active就要改成.hello-enter-active, .hello-leave-active
- 让transition有appear属性相当于:appear="true", 有了appear属性后,在页面打开后transition可以直接执行
- 在vue中已经规定了样式类名,来的时候叫.v-enter-active可以理解为进入时激活,离开的时候叫.v-leave-active,可以理解为离开时激活
- 要用动画时,要用@keyframes
- 简单的写就是from和to,难一点就是写百分比
Test.vue
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition appear>
<h1 v-show="isShow">你好啊!!!!!!!!</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
isShow:true,
}
},
}
</script>
<style>
h1{
background-color: orange;
}
.v-enter-active{
/* linear 匀速,不加也行 */
animation: atguigu 0.5s linear;
}
/* reserve表示走相反 */
.v-leave-active{
animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu{
from{
/* -100px就是从左边而来, */
transform:translate(-100%)
}
to{
transform:translate(0%);
}
}
</style>
App.vue
<template>
<div>
<Test/>
<Test2/>
</div>
</template>
<script>
// 引入school组件
import Test from "./componments/Test.vue";
import Test2 from "./componments/Test2.vue";
export default {
name: "App",
components: {Test,Test2},
};
</script>
过渡效果
可以把过渡过程放在h1里面, 也可以写在进入离开的激活
第一种方法:
h1{
background-color: orange;
transition: 0.5s linear;
}
第二种方法:
.hello-enter-active,.hello-leave-active{
transition: 0.5s linear;
}
- 让transition有appear属性相当于:appear="true", 有了appear属性后,在页面打开后transition可以直接执行
Test2.vue
<template>
<div>
<button @click="isShow =! isShow">显示/隐藏</button>
<transition appear>
<h1 name="hello" v-show="isShow">你好啊!!!!!!!!</h1>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
isShow:true,
}
},
}
</script>
<style>
h1{
background-color: orange;
transition: 0.5s linear;
}
/* 进入的起点 */ /* 离开的终点 */
.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(0);
}
</style>