Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use vue excessive effects and animation transition". In daily operation, I believe many people have doubts about how to use vue excessive effects and animation transition. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to use vue excessive effects and animation transition". Next, please follow the editor to study!

Catalogue

Transition hook function

Custom transition class name

Transition-group usage

Summary

Let's look at an example first.

The code is as follows

test

This is a passage.

Export default {name: 'transitionTest', data () {return {show: true}} .v-enter-active, .v-leave-active {transition: all .5s;} .v-enter {transform: translateY (50px); opacity: 0;} .v-leave-active {transform: translateY (50px); opacity: .5;}

Package a div component, click the button to achieve animation. It is generally used with v-if, v-show, dynamic components and component root nodes.

Transition hook function

Transition provides six hook functions for us to write corresponding animation effects at different times. The following is the timing for the execution of these six hook functions

1.v-enter: enter the transition starting state. It takes effect before the element is inserted and removed at the next frame after the element is inserted.

2.v-enter-active: enter the state when the transition takes effect. This class can be used to define the process time, delay, and curve functions for entering the transition.

3.v-enter-to: enter the end of the transition. The next frame takes effect after the element is inserted (while the v-enter is removed) and removed after the transition / animation is complete.

4.v-leave: leave the starting state of the transition. It takes effect immediately when the departure transition is triggered, and the next frame is removed.

5.v-leave-active: leave the state when the transition takes effect. This class can be used to define the process time, delay, and curve functions that leave the transition.

6.v-leave-to: leave the end of the transition. The next frame takes effect after the departure transition is triggered (while the v-leave is deleted) and removed after the transition / animation is complete

Custom transition class name

There are several places on the page where transitions are needed, and if you use the default six hook functions provided by vue, the transitions will be the same in all places. If we need to define different animation effects in different situations, we need to define the class names that belong to each transition effect. The solution is to add the name attribute to the transition tag and write your own class name prefix in the name attribute. For example, this is true when using class names: .my-trans-leave, .my-trans-enter-to. Such as:

In style, my-trans is the prefix of ".my-trans-enter-active".

.my-trans-enter-active, .my-trans-leave-active {transition: all .2s; opacity: 1;} .my-trans-enter {transition: all .2s; opacity: 0;} .my-trans-leave-to {transition: all .2s; opacity: 0;} transition-group use

When you transition a list, you must wrap it with the transition-group element. Click on the content in the list and remove it according to the following animation. The example is as follows

{{item.id}}-{{item.name}} export default {name: 'transitionGroupTest', data () {return {list: [{id: 1, name:' braised fish'}, {id: 2, name: 'fried potatoes'}, {id: 3 Name: 'roast eggplant'}, methods: {del (I) {this.list.splice (I, 1)} .main _ css {margin-left: 50px Margin-top: 50px;} .resume-enter-active {transition: all .5s linear;} .duration-leave-active {transition: all .1s linear;} .slide-enter {transform: translateX (- 100%); opacity: 0;} .summary-leave-to {transform: translateX (110%); opacity: 0;} summary

Transition with animation, done using transition tags, while providing 6 hook functions. Global animation in app.vue, wrap transition in router-view components, such as:; add a name attribute to the transition tag to define the transition class name to achieve local changes.

At this point, the study on "how to use vue excessive effects and animation transition" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.