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

This article mainly explains "how to use vue to achieve css transition and animation", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use vue to achieve css transition and animation" bar!

I. the difference between transition and animation

Transition: commonly used to indicate a change in the state of an attribute on an element.

Animation: usually used to represent the motion of an element.

Second, use Vue to achieve the basic css transition and animation 1. Animation / * css * / @ keyframes leftToRight {0% {transform: translateX (- 100px);} 50% {transform: translateX (- 50px);} 100% {transform: translateX (0);}} .animation {animation: leftToRight 3s } / / jsconst app = Vue.createApp ({data () {return {animate: {animation: true}, methods: {handleClick () {this.animate.animation =! this.animate.animation}}, template: `hello switch`})

two。 Transition / * css * / .transition {transition: background-color 3s linear 0s;} .gold {background-color: gold;} .cyan {background-color: cyan } / / jsconst app = Vue.createApp ({data () {return {animate: {transition: true, gold: true, cyan: false}, methods: {handleClick () {this.animate.gold =! this.animate.gold This.animate.cyan =! this.animate.cyan;}}, template: `hello switch`})

This is achieved by setting the class property, as well as by setting the style property:

/ * css * / .transition {transition: background-color 3s linear 0s;} / / jsdata () {return {transition: 'transition', styleObject: {backgroundColor:' gold'}, methods: {handleClick () {if (this.styleObject.backgroundColor = 'gold') {this.styleObject.backgroundColor =' cyan' } else {this.styleObject.backgroundColor = 'gold';}, template: `hello switch` 3. Use transition tags to achieve single element / component transition and animation effects 1. Basic introduction to transition

Element as a transition effect of a single element / component.

Transitions are applied only to the contents of their packages, without additional rendering of DOM elements, and do not appear at the component level that can be checked.

2. Transition class of transition

During the entry / exit transition, there are 6 class switches:

V-enter-from: defines the starting state of the transition. It takes effect before the element is inserted and removed at the next frame after the element is inserted.

V-enter-active: defines the state when the transition takes effect. Applied throughout the transition phase, effective before the element is inserted and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions for entering the transition.

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

V-leave-from: defines the start state of leaving the transition. It takes effect immediately when the departure transition is triggered, and the next frame is removed.

V-leave-active: defines the state when the transition takes effect. Applied throughout the phase of leaving the transition, it takes effect as soon as the leaving transition is triggered and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions that leave the transition.

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

3. Transition exampl

The elements that need to be transitioned will be wrapped with transition tags. To set the class required for the transition, you can choose from the above six class.

/ * css * / / * .v-enter-from {opacity: 0;} .v-enter-active {transition: opacity 1s ease;} .v-enter-to {opacity: 1;} .v-leave-from {opacity: 1;} .v-leave-active {transition: opacity 1s ease;} .v-leave-to {opacity: 0;} * / * abbreviation * / .v-enter-from, .v-leave-to {opacity: 0 V-enter-active, .v-leave-active {transition: opacity 1s ease;} / / jsconst app = Vue.createApp ({data () {return {show: true}}, methods: {handleClick () {this.show =! this.show) }}, template: `hello switch`})

4. Animation example

Only the css part needs to be modified to use the animation effect, and the function of the js part remains unchanged.

/ * css * / @ keyframes shake-in {0% {transform: translateX (- 50px);} 50% {transform: translateX (50px);} 100% {transform: translateX (0px);}} @ keyframes shake-out {0% {transform: translateX (50px);} 50% {transform: translateX (- 50px) } 100% {transform: translateX (0px);} .v-enter-active {animation: shake-in 1s ease-in;} .v-leave-active {animation: shake-out 1s ease-in-out;}

5. Name attribute of transition

Name-string: used to automatically generate the CSS transition class name, unwritten default is v.

Name is set to hy, and the corresponding class name should also be changed to the beginning of hy.

/ / js hello/* css * / .hy-enter-from, .hy-leave-to {opacity: 0;} .hy-enter-active, .hy-leave-active {transition: opacity 1s ease;} 6. Custom transition class name

We can customize the transition class name through the following attribute:

Enter-from-class

Enter-active-class

Enter-to-class

Leave-from-class

Leave-active-class

Leave-to-class

They take precedence over ordinary class names, which is for Vue's transition system and other third-party CSS animation libraries, such as Animate.css. It is very useful to use it together.

/ / first introduce the style file const app = Vue.createApp ({data () {return {show: true}}, methods: {handleClick () {this.show =! this.show) }}, / / add animation styles by customizing the transition class name: template: `hello switch`}); 7. Set transitions and animations at the same time

In some scenarios, you need to transition and animate the same element at the same time, for example, animation is triggered and completed quickly, but the transition effect is not over yet.

In this case, you need to use type attribute and set animation or transition to explicitly state the type of Vue listening you need.

Type-string. Specify the transition event type and listen when the transition ends. Valid values are "transition" and "animation". The default Vue.js automatically detects a transition event type with a long duration.

When the transition time is longer, the effect of using type='transiton':

You can find that the animation is completed first, but the transition is not terminated and the element disappears.

/ * css * / @ keyframes shake-in {0% {transform: translateX (- 50px);} 50% {transform: translateX (50px);} 100% {transform: translateX (0px);}} @ keyframes shake-out {0% {transform: translateX (50px);} 50% {transform: translateX (- 50px) } 100% {transform: translateX (0px);} .v-enter-from,.v-leave-to {color: red;} .v-enter-active {animation: shake-in 1s ease-in; transition: color 3s ease-in;} .v-enter-to, .v-leave-from {color: green;} .v-leave-active {animation: shake-out 1s ease-in-out Transition: color 3s ease-in-out;} / / jsconst app = Vue.createApp ({data () {return {show: true}}, methods: {handleClick () {this.show =! this.show;}}, template: `hello switch`})

When the transition time is longer, the effect of using type='animation':

You can see that as soon as the animation completes, the transition terminates and the element disappears.

Hello

8. Duration attribute

Duration-number | {enter: number, leave: number}: specify the duration of the transition.

The time priority is higher than that set in css.

The unit is ms.

Hello

You can also customize the duration of entry and removal:

Hello

9. Using js to realize Animation

When only JavaScript transitions are used, done must be used for callbacks in enter and leave hooks. Otherwise, they will be called synchronously and the transition will be completed immediately.

Adding: css= "false" also causes Vue to skip CSS detection, which avoids the impact of CSS rules during the transition, except for slightly higher performance.

To animate with js, declare the JavaScript hook in transition's attribute:

@ before-enter= "beforeEnter" before the transition @ enter= "enter" when @ after-enter= "afterEnter" enters the transition @ enter-cancelled= "enterCancelled" enters the transition @ before-leave= "beforeLeave" leaves before the transition @ leave= "leave" leaves the transition @ after-leave= "afterLeave" leaves the transition @ leave-cancelled= "leaveCancelled" leaves the transition const app = Vue.createApp ({data () {return {) Show: true}} Methods: {handleClick () {this.show =! this.show }, handleBeforeEnter (el) {el.style.color = 'red';}, handleEnter (el, done) {const timer = setInterval (()) > {if (el.style.color =' red') {el.style.color = 'blue' } else {el.style.color = 'red';}}, 1000); setTimeout (() = > {clearInterval (timer); / / end of animation flag / / if done () is not executed, handleAfterEnter will not execute done () }, 3000)}, handleAfterEnter (el) {console.log ('success');;}}, template: `hello switch`})

/ / jsconst app = Vue.createApp ({components: ['item-a',' item-b'], data () {return {component: 'item-a'}}, methods: {handleClick () {if (this.component =' item-a') {this.component = 'item-b') } else {this.component = 'item-a';}, template: `switch`}); app.component (' item-a', {template: `hello`}); app.component ('item-b', {template: `bye`}); 4. Implementation of animation for switching components and elements

Mode-string controls the time series of leaving / entering the transition.

Valid modes are first-out-first-in: "out-in" and first-in-first-out: "in-out"; the default is simultaneous.

You can set the transition of the node in the initial rendering through appear attribute.

/ * css * / .vripentercopyright from.vmureMurto {opacity: 0;} .v-enter-active,.v-leave-active {transition: opacity 1s ease-in;} .v-enter-to,.v-leave-from {opacity: 1 } / / jsconst app = Vue.createApp ({components: ['item-a',' item-b'], data () {return {component: 'item-a'}}, methods: {handleClick () {if (this.component =' item-a') {this.component = 'item-b') } else {this.component = 'item-a';}}, template: `switch`}); app.component (' item-a', {template: `hello`}); app.component ('item-b', {template: `bye`})

Fifth, list animation

Using components, you can render the entire list at once.

Internal elements always need to provide a unique key attribute value.

The CSS transition class will be applied to the internal elements, not the group / container itself.

There is another special thing about components. You can not only enter and leave the animation, but also change the positioning. To use this new feature, simply use the new v-move class.

/ * css * / .inline-block {display: inline-block; margin-right: 10px;} .v-enter-from,.v-leave-to {opacity: 0; transform: translateY (30px);} .v-enter-active {transition: all 1s ease;} .v-leave-active {position: absolute;}. V-move {transition: all 1s ease;}

VI. State animation

For the data element itself, the effect of animation can also be achieved through the changes of the number and operation, the display of color, the location of SVG nodes, the size of elements and other property attributes.

Examples of digital changes:

Const app = Vue.createApp ({data () {return {number: 1}}, methods: {handleClick () {const timer = setInterval (() = > {if (this.number > = 10) {clearInterval (timer)} else {this.number++) }, 100);}, template: `{{number}} add`})

Thank you for your reading, the above is the content of "how to use vue to achieve css transition and animation". After the study of this article, I believe you have a deeper understanding of how to use vue to achieve css transition and animation. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.