Explain the example code of using transition and animation in vue in detail

Before writing pages pay attention to the function, for transition and animation is only to hear its sound, not to see its person, for the page animation effect psychological 1 straight itch. Recently, I made an activity page and asked for a cool page. I finally had a chance to understand it seriously.

transition: English meaning of transition, the role is transition effect; animation: English is lively, angry and inspiring. Cartoon is animation film, and its function is animation effect.

Examples of transition in w3school:

// Hover the mouse over 1 A  div  Element, gradually change the width of the table from  100px  To  300px : 
div
{
 width:100px;
 transition: width 2s;
 -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

//transition  Attribute is 1 Abbreviation properties for setting 4 Transition attributes: 

// Specify CSS Property of name , transition Effect 
transition-property
//transition How many seconds or milliseconds does the effect require to complete 
transition-duration
// Specify transition Speed curve of effect 
transition-timing-function
// Definition transition When the effect begins, 
transition-delay

Examples of animation in w3school:

// Use the abbreviation property to match the animation with the  div  Element binding 
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari  And  Chrome */
}
//animation  Attribute is 1 Abbreviation properties for setting 6 Animation properties: 
// Object that needs to be bound to the selector  keyframe  Name. . 
animation-name
// Specifies the time, in seconds or milliseconds, to complete the animation. 
animation-duration
// Specify the speed curve of animation. 
animation-timing-function
// Specifies the delay before the animation starts. 
animation-delay
// Specify the number of times the animation should be played. 
animation-iteration-count
// Specify whether animation should be played in reverse in turn. 
animation-direction

animation uses @ keyframes to specify animation

@keyframes animationname {
 keyframes-selector {
  css-styles;
 }
}
// Necessary. Defines the name of the animation. 
animationname
// Necessary. Percentage of animation duration. 
// Legal values: 
//0-100%
//from (With  0%  Same) 
//to (With  100%  Same) 
keyframes-selector
// Necessary. 1 One or more legal  CSS  Style properties. 
css-styles

The above is the basic knowledge of transition and animation. The most important project is to use the mainstream framework like vue, and use transition and animation under vue

1. The first step is to install dependencies, only install animation animation library, transiton is directly available tags, do not download dependencies

npm install animate.css  In fact, in fact, the save

2. animation Animation Library under Global Reference 1

import animate from 'animate.css'
Vue.use(animate); 

3. Simply use the animation animation library under 1, as long as you add the specified animation effect name in class

<div class="rotateIn"
  style="animation-duration:2s;
   animation-delay:1s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>
<div class="fadeInLeft"
  style="opacity:0;
   animation-duration:3s;
   animation-delay:2s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>
<div class="fadeInUp"
  style="opacity:0;
   animation-duration:3s;
   animation-delay:3s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>

4. Formally use transiton and animation, advance knowledge 1, and use transition tag

1. Use basic transiton and animation animations

/*v Is the default, in the transition Definition in name Attribute 
 <transition name=fade>
 v-enter-from It will be changed to fade-enter-from
*/
<transition>
 <div>hello world</div>
 </transition>
 // Use transition Tag, directly in the css Middle control 
 /* Effect before element entry */
 .v-enter-from{
 opacity: 0;
 }
 /* Effect when element enters */
 .v-enter-active{
 /* Use the defined animation */
  animation: shake 0.3s;
 }
/* Effect after element entry */
.v-enter-to{
  opacity: 1;
 }
/* Effect before element leaves */
 .v-leave-from{
  opacity: 1;
 }
/* Effect when element leaves */
 .v-leave-active{
/* Use the defined animation */
  animation: shake 0.3s;
 }
 /* Effect after element leaves */
 .v-leave-to{
  opacity: 0;
 }
 /* Definition 1 Animation effect */
 @keyframes shake {
  0%{
   transform: translateX(-100px);
 }
  50%{
  transform: translateX(-50px);
 }
 0%{
   transform: translateX(50px);
 }
 }

2. Use the attributes of trnasition tag and combine the animation library of animation

<transition
 transition :duration="{enter:1500,leave:600}"
 enter-from-class="animated"
 enter-active-class="animated"
 enter-to-class="animated"
 leave-from-class="animated fadeOut"
 leave-active-class="animated fadeOut"
 leave-to-class="animated fadeOut"
 v-on:before-enter="beforeEnter"
 　　 v-on:enter="enter"
 　　 v-on:after-enter="afterEnter"
 　　 v-on:enter-cancelled="enterCancelled"
 　　 v-on:before-leave="beforeLeave"
 　　 v-on:leave="leave"
 　　 v-on:after-leave="afterLeave"
 　　 v-on:leave-cancelled="leaveCancelled"
 mode="out-in" appear
>
/*enter-from-class Is v-enter-from Before the element enters 
 animated Is to use animation Animation library, fadeOut Is the animation effect 
 */
 /*before-enter These are hook functions, which are sliding into the state 
 mode="out-in" Is it to set whether the animation is first in, then out, or first out, then in 
 appear  Is to set the animation to start when loading 
 */
//  Entering 
// Before animation enters 
// --------
beforeEnter: function (el) {
 //el Is dom Element 
 // ...
},
//  This callback function is an optional setting 
//  And  CSS  Use when combined 
// When animation enters 
enter: function (el, done) {
 // ...
 done()
},
// After the animation enters, 
afterEnter: function (el) {
 // ...
},
// Animation Enters Completion 
enterCancelled: function (el) {
 // ...
},
// --------
//  On leaving 
// --------
beforeLeave: function (el) {
 // ...
},
//  This callback function is an optional setting 
//  And  CSS  Use when combined 
leave: function (el, done) {
 // ...
 done()
},
afterLeave: function (el) {
 // ...
},
// leaveCancelled  For use only  v-show  Medium 
leaveCancelled: function (el) {
 // ...
}

The following are the animation effects commonly used in animation

fade: {
 title: '淡入淡出',
 fadeIn: '淡入',
 fadeInDown: '向下淡入',
 fadeInDownBig: '向下快速淡入',
 fadeInLeft: '向右淡入',
 fadeInLeftBig: '向右快速淡入',
 fadeInRight: '向左淡入',
 fadeInRightBig: '向左快速淡入',
 fadeInUp: '向上淡入',
 fadeInUpBig: '向上快速淡入',
 fadeOut: '淡出',
 fadeOutDown: '向下淡出',
 fadeOutDownBig: '向下快速淡出',
 fadeOutLeft: '向左淡出',
 fadeOutLeftBig: '向左快速淡出',
 adeOutRight: '向右淡出',
 fadeOutRightBig: '向右快速淡出',
 fadeOutUp: '向上淡出',
 fadeOutUpBig: '向上快速淡出'
},
bounce: {
 title: '弹跳类',
 bounceIn: '弹跳进入',
 bounceInDown: '向下弹跳进入',
 bounceInLeft: '向右弹跳进入',
 bounceInRight: '向左弹跳进入',
 bounceInUp: '向上弹跳进入',
 bounceOut: '弹跳退出',
 bounceOutDown: '向下弹跳退出',
 bounceOutLeft: '向左弹跳退出',
 bounceOutRight: '向右弹跳退出',
 bounceOutUp: '向上弹跳退出'
},
zoom: {
 title: '缩放类',
 zoomIn: '放大进入',
 zoomInDown: '向下放大进入',
 zoomInLeft: '向右放大进入',
 zoomInRight: '向左放大进入',
 zoomInUp: '向上放大进入',
 zoomOut: '缩小退出',
 zoomOutDown: '向下缩小退出',
 zoomOutLeft: '向左缩小退出',
 zoomOutRight: '向右缩小退出',
 zoomOutUp: '向上缩小退出'
},
rotate: {
 title: '旋转类',
 rotateIn: '顺时针旋转进入',
 rotateInDownLeft: '从左往下旋入',
 rotateInDownRight: '从右往下旋入',
 rotateInUpLeft: '从左往上旋入',
 rotateInUpRight: '从右往上旋入',
 rotateOut: '顺时针旋转退出',
 rotateOutDownLeft: '向左下旋出',
 rotateOutDownRight: '向右下旋出',
 rotateOutUpLeft: '向左上旋出',
 rotateOutUpRight: '向右上旋出'
},
flip: {
 title: '翻转类',
 flipInX: '水平翻转进入',
 flipInY: '垂直翻转进入',
 flipOutX: '水平翻转退出',
 flipOutY: '垂直翻转退出'
},
strong: {
 title: '强调类',
 bounce: '弹跳',
 flash: '闪烁',
 pulse: '脉冲',
 rubberBand: '橡皮筋',
 shake: '左右弱晃动',
 swing: '上下摆动',
 tada: '缩放摆动',
 wobble: '左右强晃动',
 jello: '拉伸抖动'
}

At the end, learning to use some transition and animation will definitely increase the user experience and make some high-rise web pages.