<template>
<div id = "root">
<Test/>
<Test2/>
<Test3/>
</div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
import Test3 from './components/Test3.vue'
export default{
name:'App',
components:{
Test,
Test2,
Test3
},
}
</script>
<script> export default{ name:'Test', data() { return { isShow:true } }, } </script>
<style> h1{ background-color: orange; } .hello-enter-active{ animation: atguigu 1s; }
.hello-leave-active{ animation: atguigu 1s reverse ; }
@keyframes atguigu{ from{ transform: translateX(-100%); } to{ transform: translateX(0px); } } </style> <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="hello" :appear="true"> <h1 v-show="isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">尚硅谷!</h1> </transition-group> </div> </template>
<script> export default{ name:'Test', data() { return { isShow:true } }, } </script>
<style> h1{ background-color: orange; transition: 1s linear; } /* 进入的起点 *//* 离开的终点 */ .hello-enter,.hello-leave-to{ transform: translateX(-100%); } /* 进入的终点 *//* 离开的起点 */ .hello-enter-to,.hello-leave{ transform: translateX(0); } </style> <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name="animate_animated animate_bounce" enter-active-class="animate__bounce" leave-active-class="animate__backOutUp" appear > <h1 v-show="!isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">尚硅谷!</h1> </transition-group> </div> </template>
<script> import 'animate.css' export default{ name:'Test', data() { return { isShow:true } }, } </script>
<style> h1{ background-color: orange; } </style> 标签：11,动画,vue,translateX,transform,export,Test,hello From： https://www.cnblogs.com/hbro/p/18041239