The importance of transition effects in interactive experiences is self-evident. In the past, we used js or Jquery to add or remove elements, match the styles defined in CSS, and then refer to some JavaScript libraries, and create very complex and amazing dynamic effects, but this method is still too cumbersome.
A built-in transition system can automatically apply transition effects when elements are inserted or removed from the DOM. Vue will trigger the css transition or animation when it is a party. You can also provide the corresponding javascript hook function to perform custom DOM operations during the transition process.
Each transition effect requires the use of transition feature on the target element.
<div v-if="show" transition="my-style">Show</div>
The characteristics of transition can be used with the following instructions:
-if -show -for 4. Dynamic Components
There are other instructions or resources that you can search for by yourself.
The complete code example is as follows:
<div v-if="show" :transition="expand"></div> // Expand must be defined in advance, and the styles written after expansion must be used (key)<transition name="expand"><div v-if="show">show</div></transition>Such nesting is OK
.expand-transition { // Required transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
.expand-enter{ //Start to enter the transition, the element is inserted and takes effect transition:opacity .5s;
}
.fade-leave-active { // End status opacity:0;
}
Of course, there must be a state where there is a state where there are four (CSS class) names toggle in the enter/leave state.
-enter: Defines the start state of entering the transition, takes effect when the element is inserted, and removes it in the next frame
-enter-active: Defines the end state of entering the transition, which takes effect when the element is inserted, and removes after the transition/animation is completed
-leave: Defines the start state of leaving the transition, effective when leaving the transition is triggered, and removes in the next frame
-leave-active: Defines the start state of leaving the transition, effective when leaving the transition is triggered, and removes in the next frame
Based on the above four states, you can write a transition effect of a css completely, such as the page is entered from the left side of the window. Isn’t this cool?
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.