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>