目录
动画效果
首先动画效果
这定义大家应该都明白吧,我也不好怎么说。
先来个效果图(不晓得搞动态效果先这样看吧)
代码
直接来代码吧........
组件Studnet.vue的代码为:
<template>
<div>
<button @click="isShow = !isShow">显示和隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好呀</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped>
h1 {
background-color: yellow;
}
.hello-enter-active {
animation: liujiayi 0.5s linear;
}
.hello-leave-active {
/* animation: liujiayi 0.5s reverse linear; */
animation: liujiayi 0.5s linear reverse;
}
@keyframes liujiayi {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>
下面来分别介绍
每一个name都是独一无二的,如果写了name的话,下面的代码应该这样写
没写的话,直接统一
appear的话就是
请自行百度,它的完整写法是 :appear="true" 别忘了前面的:
过渡效果
和动画效果是效果显示是一样的
代码:
话不多说,上代码
Student2.vue代码如下:
<template>
<div>
<button @click="isShow = !isShow">显示和隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好呀</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Student2",
data() {
return {
isShow: true,
};
},
};
</script>
<style>
h1 {
background-color: yellow;
transition: 0.5s linear;
}
/* 进入的起点 */
.hello-enter {
transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
transform: translateX(0px);
}
/* 离开的起点 */
.hello-leave {
transform: translateX(0px);
}
/* 离开的终点 */
.hello-leave-to {
transform: translateX(-100%);
}
</style>
介绍:
这里------------------->
是其中一种写法,另一种写法为:
用哪个看自己喜欢
多个元素过渡(transition-group)
<transition-group name="hello" appear>
<h1 v-show="isShow" key="1">你好呀</h1>
<h1 v-show="!isShow" key="2">刘家奕</h1>
</transition-group>
一定要写key