Transitions and animations
Use <transition> package assembly
例： <transition name="fade">
<Div v-if = "true"> Transition Animation </ div>
</transition>
style：.fade-enter-active, .fade-leave-active {transition: opactiy .5s}
.fade-enter, .fade-leave-to{opacity:0;}
V-if the state switched over can make the div element fade fade, rather than directly add and delete
VUE principle by tansition name attribute value of the component, and then use the element to the class name in which each node comprising a transition. When the elements are added to or removed from the document in a document, the application will respectively enter and leave two types of transition. The following is the class name will be added:
{Name} -enter (common): This class name will be added when the element is inserted into the DOM, and then immediately removed in the next frame. You can use it to set the CSS property that needs to be removed when the element entered the transition.
{Name} -enter-active (conventional): Application stage element entire animation. And -enter simultaneously added, then removed when the animation is complete. Css settings that apply to the length of time of transition, the transition curve function and use properties.
{Name} -enter-to: the class name will be the name of the class while -ENTER removed from the element added to the element, that is suitable to set the css properties when the element is added into the transition begins, is typically in the class -ENTER set contrast better transition properties
{Name} -leave: exiting the transition, is added at the time away from the transition, the next frame is removed.
{Name} -leave-active (conventional): transition away, leaving the entire period for the transition.
{Name} -leave-to (common): after the commencement of the next frame away from the transition is triggered, be removed after the completion of the transition
js transition animation
<Transition> js also provides for implementing animation hooks, hooks similar functions and class names used in the transition css.
beforeEnter: Enters the start trigger before animation, for setting the initial value
enter: This hook will enter the animation began to be triggered, you can run the animation here. It can be done using a callback to indicate the animation has been completed
afterEnter: the animation is triggered when execution is complete
enterCancelled: To go to a movie is canceled
beforeLeave: This is equivalent to hook into the animation beforeEnter hook is called before leaving the animation begins
leave: leave for animation purposes is equivalent to enter into the hook, where you can enter the animation
afterLeave: will be triggered when leaving the animation execution is complete
leaveCancelled: triggered when leaving the animation is canceled
These hooks will be in the form of trigger on time transiton components
Example:
<transition
v-on:before-enter="test1"
v-on:enter="test2"
v-on:leave="test3"
> <div V- IF = " to true " > Transition animation </ div> </transition>
//script
methods:{
test1(el){
el.style.opacity = 0;
},
test2(el){
TweenLite.to(el,0.6,{opacity:1,onComplete:done});
},
test3(el){
TweenLite.to(el,0.6,{opacity:0,onComplete:done});
}
You can create animations using js css transition than using more complex animation effects, including multi-step animation, or every show different transition effects, but a better performance of css, css where the general can achieve it using css.