动画:
// 进入和离开动画(从左边进入)
<template>
<div>
<button @click="handleClick">点击显示与隐藏动画(过渡)</button>
<transition name="trans" appear>
<h1 v-show="isShow">动画</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'SchoolName',
data() {
return {
isShow: true
}
},
methods: {
handleClick() {
this.isShow = !this.isShow
}
}
}
</script>
<style>
h1 {
background: red;
}
.trans-enter-active {
/* 加动画 */
animation: animate 1s;
}
.trans-leave-active {
/* 加动画 */
animation: animate 1s reverse;
}
/* 动画效果封装好 */
@keyframes animate {
from {
/* 从哪里来 */
transform: translateX(-100%);
} to {
/* 到哪里去 */
transform: translateX(0);
}
}
</style>
过渡:
// 进入和离开过渡(从左边进入)
<template>
<div>
<button @click="handleClick">点击显示与隐藏动画(过渡)</button>
<transition-group name="trans" appear>
<h1 v-show="isShow" key="1">动画1</h1>
<h1 v-show="isShow" key="2">动画1</h1>
</transition-group>
</div>
</template>
<script>
export default {
name: 'SchoolName',
data() {
return {
isShow: true
}
},
methods: {
handleClick() {
this.isShow = !this.isShow
}
}
}
</script>
<style>
h1 {
background: red;
}
.trans-enter, .trans-leave-to {
transform: translateX(-100%);
}
.trans-enter-active, .trans-leave-active {
/* transition过渡 */
transition: 1s linear;
}
.trans-enter-to, .trans-leave {
transform: translateX(0);
}
</style>