vue中动画效果
//创建一个Test组件
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition appear="true">
//当appear = 'true'与只等价的可以只写一个 appear 效果是一样的
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: #bfa;
}
.v-enter-active {
animation: atguigu 1s linear;
}
.v-leave-active {
animation: atguigu 1s reverse linear;
}
@keyframes atguigu {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
</style>
分析:
- 浏览器是不认识transition标签的,也就是在浏览器查看是没有这个标签的,它是vue认识的
- 如果给transition标签配上 name:hello 则样式中如v-enter-active需要改成 hello-enter-active (没名字的时候默认是v)
- 给transition标签配置name的好处就是多个标签在使用的时候可以利用不同的动画效果
- 如果在给某个标签添加一个为真的属性其实保留它的属性名就行
vue中过度效果
- 下面用Test2举例vue中的过渡效果属性
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition :appear="true" name="hello">
<!-- 当appear = 'true'与只等价的可以只写一个 appear 效果是一样的 -->
<h1 v-show="isShow">你好啊!</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: #bfa;
/* 可以在h1中设置过度的效果 */
/* transition: 0.5 linear; */
}
/* 进入的起点、离开的终点 */
.hello-enter,
.hello-leave-to {
transform: translateX(-100%);
}
/* 设置过度的效果,可以加在这也可以加在h1中 */
.hello-enter-active,
.hello-leave-active {
transition: 0.5 linear;
}
/* 进入的起点、离开的终点 */
.hello-enter-to,
hello-leave {
transform: translateX(0);
}
</style>
- 如果是多个过度元素需要用 transition-group
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition-group :appear="true" name="hello">
<!-- 当appear = 'true'与只等价的可以只写一个 appear 效果是一样的 -->
<h2 v-show="!isShow" key="1">你好啊!</h2>
<h2 v-show="isShow" key="2">我很好</h2>
</transition-group>
<!-- 多个元素过度需要用transition-group
且每个元素要配置key,key的值必须不同
-->
</div>
</template>
<script>
export default {
name: "Test2",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h2 {
background-color: #bfa;
/* 可以在h1中设置过度的效果 */
/* transition: 0.5 linear; */
}
/* 进入的起点、离开的终点 */
.hello-enter,
.hello-leave-to {
transform: translateX(-100%);
}
/* 设置过度的效果,可以加在这也可以加在h1中 */
.hello-enter-active,
.hello-leave-active {
transition: 0.5s linear;
}
/* 进入的起点、离开的终点 */
.hello-enter-to,
hello-leave {
transform: translateX(0);
}
</style>