vue--day56--动画效果
1. Test.vue
<template>
<div>
<button @click="isShow=!isShow">
显示/隐藏
</button>
<h1 v-show="isShow" class="come">你好呀</h1>
</div>
</template>
<script>
export default{
name:'Test',
data(){
return {
isShow:true
}
}
}
</script>
<style scoped>
h1{
background-color: orangered;
}
.come{
animation: ceshi 1s;
}
.go{
animation: ceshi 1s reverse;
}
@keyframes ceshi {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
2. 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 scoped>
h1{
background-color: orangered;
}
.v-enter-active{
animation: ceshi 1s linear;
}
.v-leave-active{
animation: ceshi 1s linear reverse;
}
@keyframes ceshi {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
用transition 包裹想要的动画效果的代码。可以用name 来标记属性
.v-enter-active{
animation: ceshi 1s linear;
}
.v-leave-active{
animation: ceshi 1s linear reverse;
}
@keyframes ceshi {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
