Test.js代码:
<template>
<div>
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">你好啊</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
isShow:true
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1{
background-color: rebeccapurple;
}
.hello-enter-active{
animation: 0.1s linear;
}
.hello-leave-active{
animation: atguigu 0.1s reverse;
}
@keyframes atguigu {
from{
transform: translateX(-100X);
}
to{
transform: translateX(0px);
}
}
</style>
App.vue代码:
<template>
<div>
<Test/>
</div>
</template>
<script>
import Test from './components/Test.vue'
export default {
name: 'App',
components: {Test},
}
</script>
main.js代码:
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
})
效果: