(1) Whether it's switching between components, or using v-if, v-show instructions to control the display of dom, as long as you want to achieve the animation effect, you must wrap it outside and give a name attribute to specify the use of the defined animation
<div id="root"> <transition name="fade"> <component :is="type"></component> </transition> <button @click="change">change</button> </div>
(2) Start to define the animation. Because the name in front is fade, the class name defined in the following animation must start with fade.
<style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style>
(3) Achieving results
(1) We still use the transiton package and give a name, but the definition of animation in css is different.
The difference between keyframe animation and transition animation is that keyframe is a kind of insert frame animation. We can define the animation at different frames. Here we only define it at 0%, 50% and 100%. You can define more in the middle
(2) Define animation
<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .fade-enter-active, .fade-leave-active { transform-origin: left center; animation: bounce-in 3s; } </style>
(3) Achieving results
(1) In the past, we used name = "fade" to define a lot of animations. Of course, we can write a lot of animations in name, but less in definition. And use animate.css It has to be written like this.
① The transition tag says this
<div id="root"> <transition enter-active-class="enter" leave-active-class="leave"> <component :is="type"></component> </transition> <button @click="change">change</button> </div>
② Define animation to write like this
<style> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .enter, .leave { transform-origin: left center; animation: bounce-in 3s; } </style>
The effect is as like as two peas before.
(2) After learning how to rewrite name, we can use animate.css Library, described here, animate.css It belongs to animation with @keyframe, not transition animation.
① I use CDN method to import and store
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
② Use in the transition tab
<div id="root"> <transition enter-active-class="animated bounce" leave-active-class="animated shake"> <component :is="type"></component> </transition> <button @click="change">change</button> </div>
animated required, followed by the type of animation
4, List transitionJust use traction group
<div id="root"> <transition-group enter-active-class="enter" leave-active-class="leave"> <div v-for="item of list" :key="item.index">{}---{}</div> </transition-group> <button @click="change">change</button> </div>
result
