Implementation of CSS animation principles in Vue

The following code is to click the button to implement Hello World display and hide

 Hello World  
Let VM = New Vue ({EL: '# ROOT', DATA: {show: true}, methods: {handleclick () { =!}}})
There is a demand at this time, and it is desirable to achieve a gradually movable animation effect when displaying and hiding.

Hello World

  Let VM = New Vue ({EL : '# root', Data: {Show: true}, methods: {handleclick () { =!}}}) 
If you want Hello World has an animation effect, you need to cover a layer of Transition label, meaning it is packaged, there is an animation effect, you can give it a name name = "fade".
When an element is wrapped by the Transition tag, Vue will automatically analyze the CSS style of the element, and then build animation flow

When the animation has not been executed, Vue will help usTwo Class adds two Class on the DOM label, respectively, respectively, Fade-Enter-Active. After the first frame of the animation is completed, the TRANSITION is analyzed, and there is an animation effect. Vue will delete the Class of the V-Enter on the DOM tab when the animation is running to the second frame. , Add a V-ENTER-TO Class.

Then the animation will continue to execute, execute the end of the time, Vue will do one thing, it will delete the previously added V-Enter-To and V-Enter-Active,

.fade-enter {Opacity: 0;}. Fade-enter-active {transition: Opacity 3S;} Vue中CSS动画原理的实现

Hello World


Let VM = New Vue ({EL: ‘#Root’, Data: {show: true}, methods: {handleclick () { =!}} })
  We only need to write the fade-enter and fade-enter-active in CSS. It should be noted here that the default in VUE is started with V, such as: V-Enter, Transition adds a name attribute, you can use the Name property value to start, such as Fade-Enter. 
The two CLASS now is:
When the animation has not been executed, there is already Fade-Enter, Fade-Enter-Active, Animation First Frame Runtime Fade-ENTERIt will be removed, the CSS effect Opacity: 0 will become Opacity: 1 until the animation executes Fade-Enter-Active will be removed, during which it is monitored with Transition, it is necessary to complete.
Hidden animation flow:

hidden first In an instant, VUE will add two CLASs on the DOM, which is V-Leave and V-Leave-Active

When running to the second frame, VUE will remove V-Leave, add a V -Leave-to

Then the animation will continue to execute, and the VUE will delete the previously added V-Leave-To and V-Leave-Active.


.fade-leave-to {Opacity: 0;}. Fade-leave-active {transition: Opacity 3s;}

Hello World

Let VM = New Vue ({El: ‘#root’, Data: {show: true}, methods: {handleclick () { = “}}

Why did the two CSS animation effects have been added?

From the first moment of animation, the Fade-Leave-Active this class exists. That is, during the operation of the animation, I wantAlways listen to the Opacity of DIV, once opacity changes, I want to make him execute within 3s.

In the first instant fade-leave’s opacity is 1, it is displayed; the second instant Opacity is 0, at this time, it is necessary to add a fade-leave-to-to-To Class, and fade- Leave-Active has been listening to Opacity changes. Once Opacity changes, it will make it completed in 3S
 Custom Class  
If I don't want to use The six Class provided by Vue, I want to customize a class, how to implement it?
VUE provides us with a customization The method of the attribute, use Enter-Active-Class to customize an Enter class; use the Leave-Active-Class to customize a Leave class.

Using this characteristic, it is necessary to use in the project When complex CSS style, you can introduce a third-party CSS style library, here you introduce an animate.css library.

Use a third-party library (animate.css), you need to pay attention to two points:

Methods must be used
Custom Class must have one Animated Class

Hello World
The above is the button clicks will appear an animation effect, but when the demand wants to achieve a home, there is an animation effect?

Hello World
  <transition name="fade" 
If you need to have an animation, You need to use two custom properties: APPEAR, APPEAR-ACTIVE-CLASS to be implemented, see the above code.
Transition Transition and Animation At the same time

When using Transition and Animation animation, the movie is determined by anyone?

VUE provides manual settings, see the following code

  1. Hello World
 In the Transition tag, you can use the Type property, which is: If there is a Transition and Animation, set Type to Transition, which is based on the transition animation.  <transition name="fade" 
Back to the code, now you need to define the momentum of the animation, how to achieve it?

Vue provides the property of Duration, which can be Define the movie duration.
This custom animation is long, but also the complex point:
  <transition name="fade" 
  appear         // 加上 appear 属性
  appear-active-  //使用自定义属性 appear-active-class 就可以实现
Hello World


In the Transition tag, the V-IF can control the display hidden, and V-SHOW can also control the display hidden, even dynamic components. As long as the animation changes in the TRANSITION, there will be a transition effect

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment