vue--day58---多个元素过度

标签：vue translateX -- transform --- Test2 Test hello

1.App.vue

<template>   <div> <Test></Test> <Test2></Test2> </div>     </template>   <script>   import Test from './components/Test.vue'; import Test2 from './components/Test2.vue';     export default { name: 'App', components: { Test, Test2   }, data(){ return { isShow:true }   },
} </script>   <style scoped>   </style>      

2.Test.vue

<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>
<style scoped> h1{ background-color: orangered; }
.hello-enter-active{ animation: ceshi 1s linear; }
.hello-leave-active{ animation: ceshi 1s linear reverse; } @keyframes ceshi { from{ transform: translateX(-100%); }
to{ transform: translateX(0px); }
}
</style>   3. Test2.vue   <template> <div> <button @click="isShow=!isShow"> 显示/隐藏 </button>
<transition-group name="hello" appear> <h1 v-show="!isShow" key="1">史满意</h1> <h1 v-show="isShow" key="2">SMY</h1> </transition-group>  
</div>   </template>
<script> export default{ name:'Test2', data(){ return { isShow:true } } }

</script>
<style scoped> h1{ background-color: orangered; /* transition:1s linear; */ } /* 进入的起点 离开的终点 */ .hello-enter,.hello-leave-to{ transform: translateX(-100%); } .hello-enter-active,.hello-leave-active{ transition:1s linear;
}
/* 进入的终点 离开的起点 */ .hello-enter-to,.hello-leave{ transform: translateX(0); }
</style>

 

3.

标签：vue,translateX,--,transform,---,Test2,Test,hello
From： https://www.cnblogs.com/satisfysmy/p/17615655.html