单元素 单组件的入场出场动画
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="../js/vue.js"></script>
<style>
.v-leave-to{
opacity: 0;
}
.v-enter-form{ opacity: 0; }
.v-leave-active, .v-enter-active{ transition: opacity 3s ease-in; }
.v-leave-from, .v-enter-to{ opacity: 1; }
</style>
</head> <body> <div id="root"></div> <script> const ComponentA = { template: `<div> hello word</div>`, }
const ComponentB = { template: `<div> bye word</div>`, }
var app = Vue.createApp({ data(){ return { component:'component-a' } }, methods:{ handleClick(){ if(this.component === 'component-a'){ this.component = 'component-b' }else{ this.component = 'component-a' } } }, components:{ 'component-a': ComponentA, 'component-b': ComponentB }, template:` <transition mode="out-in" appear> <component-a :is ="component" /> </transition> <button @click="handleClick">切换</button> `, }).mount('#root')
</script>
</body> </html>
.v-enter-form{ opacity: 0; }
.v-leave-active, .v-enter-active{ transition: opacity 3s ease-in; }
.v-leave-from, .v-enter-to{ opacity: 1; }
</style>
</head> <body> <div id="root"></div> <script> const ComponentA = { template: `<div> hello word</div>`, }
const ComponentB = { template: `<div> bye word</div>`, }
var app = Vue.createApp({ data(){ return { component:'component-a' } }, methods:{ handleClick(){ if(this.component === 'component-a'){ this.component = 'component-b' }else{ this.component = 'component-a' } } }, components:{ 'component-a': ComponentA, 'component-b': ComponentB }, template:` <transition mode="out-in" appear> <component-a :is ="component" /> </transition> <button @click="handleClick">切换</button> `, }).mount('#root')
</script>
</body> </html>
标签：opacity,动画,const,出场,component,leave,template,enter,组件 来源： https://www.cnblogs.com/eric-share/p/15656348.html