In the past, when writing pages, I focused on function. I only heard the sounds of transition and animation, but I didn’t see anyone. I always had itchy about the animation effects of the page. I recently started an activity page and asked for a cool page. I finally got the chance to get to know it carefully.
transition: The meaning of English transition is the transition effect; animation: the English is lively, angry, and motivated. The cartoon is animation film, and the function is the animation effect.
An example of transition in w3school:
//Hoom the mouse over a div element and 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;}
//The transition property is an abbreviation property that is used to set four transition properties:
//Specify the name of the CSS attribute, transition effecttransition-property
//The transition effect needs to specify how many seconds or milliseconds to completetransition-duration
//Specify the speed curve of the transition effecttransition-timing-function
//Define the transition effect at the beginningtransition-delay
Animation instance in w3school:
//Use abbreviation attributes to bind animation with div elementsdiv
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
//The animation property is an abbreviation property that is used to set six animation properties://Specify the keyframe name that needs to be bound to the selector. .animation-name
//Specify the time it takes to complete the animation, in seconds or milliseconds.animation-duration
//Specify the speed curve of the animation.animation-timing-function
//Specify the delay before the animation starts.animation-delay
//Specify the number of times the animation should be played.animation-iteration-count
//Specify whether animations should be played in reverse in turn.animation-direction
animation uses @keyframes to prescribe animation
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
//Required. Defines the name of the animation.animationname
//Required. Percentage of animation duration.//Legal value://0-100%
//from (same as 0%)//to (same as 100%)keyframes-selector
//Required. One or more legal CSS style properties.css-styles
The above is the basic knowledge of transition and animation. The most important project uses mainstream frameworks like vue, so use vue to use transition and animation.
1. The first step is to install the dependency, only install the animation animation library. Transiton is a tag that can be used directly, and there is no need to download the dependency
npm install –save
2. Reference the animation animation library globally
import animate from '' (animate);
3. Simply use the animation animation library, just add the specified animation effect name to the 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. Formal use of transiton and animation, advance knowledge, and use transition tags
1. Use basic transiton and animation animations
/*v is the default, define the name attribute in the transition
<transition name=fade>
v-enter-from will need to be changed to fade-enter-from
*/
<transition>
<div>hello world</div>
</transition>
//When using the transition tag, directly control it in css /*Element before entering effect*/
.v-enter-from{
opacity: 0;
}
/*Effect when element enters*/
.v-enter-active{
/*Use defined animation*/
animation: shake 0.3s;
}
/*Elements enter the effect*/
.v-enter-to{
opacity: 1;
}
/*Elements before leaving the effect*/
.v-leave-from{
opacity: 1;
}
/*Elements leave effect*/
.v-leave-active{
/*Use defined animation*/
animation: shake 0.3s;
}
/*Elements left after the effect*/
.v-leave-to{
opacity: 0;
}
/*Define an animation effect*/
@keyframes shake {
0%{
transform: translateX(-100px);
}
50%{
transform: translateX(-50px);
}
0%{
transform: translateX(50px);
}
}
2. Use the properties of the trnasition tag, combined with animation library
<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 before the v-enter-from element enters
animated means using the animation animation library, fadeOut means animation effect
*/
/*before-enter These are hook functions, which slide into the state
mode="out-in" sets whether the animation is first in and then out, or first out and then in
Appear is to start animation when setting up loading
*/
// Enter//Before the animation enters// --------
beforeEnter: function (el) {
//el is the dom element // ...
},
// This callback function is an optional setting// Used when combined with CSS//When the animation entersenter: function (el, done) {
// ...
done()
},
//After the animation entersafterEnter: function (el) {
// ...
},
//The animation is completedenterCancelled: function (el) {
// ...
},
// --------
// When leaving// --------
beforeLeave: function (el) {
// ...
},
// This callback function is an optional setting// Used when combined with CSSleave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// LeaveCancelled is only used in v-showleaveCancelled: function (el) {
// ...
}
Below are the animation effects commonly used in animation
fade: {
title: 'Fake in and out',
fadeIn: 'fade in',
fadeInDown: 'Fake in',
fadeInDownBig: 'Fast Fade in down',
fadeInLeft: 'Fake right',
fadeInLeftBig: 'Fast Fade in to the Right',
fadeInRight: 'Fake to the left',
fadeInRightBig: 'Fast fade to the left',
fadeInUp: 'Fake upward',
fadeInUpBig: 'Fast Fade in Upward',
fadeOut: 'fade out',
fadeOutDown: 'Fake it out',
fadeOutDownBig: 'Fast out quickly',
fadeOutLeft: 'Fake out to the left',
fadeOutLeftBig: 'Fast out to the left',
adeOutRight: 'Fake out to the right',
fadeOutRightBig: 'Fast out to the right',
fadeOutUp: 'Fake it up',
fadeOutUpBig: 'Fast out upward'
},
bounce: {
title: 'Bounce class',
bounceIn: 'Bounce in',
bounceInDown: 'Bounce down into',
bounceInLeft: 'Bounce to the right into',
bounceInRight: 'Bounce to the left and enter',
bounceInUp: 'Bounce up and enter',
bounceOut: 'Bounce exit',
bounceOutDown: 'Bounce down and exit',
bounceOutLeft: 'Bounce to the left and exit',
bounceOutRight: 'Bounce to the right and exit',
bounceOutUp: 'Bounce up and exit'
},
zoom: {
title: 'Scaling class',
zoomIn: 'Zoom in',
zoomInDown: 'Zoom down to enter',
zoomInLeft: 'Zoom in to the right',
zoomInRight: 'Zoom in to the left',
zoomInUp: 'Zoom up to enter',
zoomOut: 'Shrink Exit',
zoomOutDown: 'Shrink down and exit',
zoomOutLeft: 'Shrink to the left and exit',
zoomOutRight: 'Shrink to the right and exit',
zoomOutUp: 'Shrink up and exit'
},
rotate: {
title: 'Rotation Class',
rotateIn: 'Clockwise rotation into',
rotateInDownLeft: 'Screw in from left to bottom',
rotateInDownRight: 'Screw in from right down',
rotateInUpLeft: 'Screw in from left to top',
rotateInUpRight: 'Screw in from right to top',
rotateOut: 'Clockwise rotation exit',
rotateOutDownLeft: 'Spin out to the lower left',
rotateOutDownRight: 'Spin out to the lower right',
rotateOutUpLeft: 'Spin out to the upper left',
rotateOutUpRight: 'Spin out to the upper right'
},
flip: {
title: 'Flip Class',
flipInX: 'Horizontal flip into',
flipInY: 'Flip vertically into',
flipOutX: 'Horizontal flip exit',
flipOutY: 'Vertical flip exit'
},
strong: {
title: 'emphasized class',
bounce: 'bounce',
flash: 'Flash',
pulse: 'pulse',
rubberBand: 'Rubber',
shake: 'Wind-shaking left and right',
swing: 'Swing up and down',
tada: 'Zoom swing',
wobble: 'Further and hard to shake',
jello: 'Stretching and shaking'
}
At the end, learning to use some transitions and animations will definitely increase the user experience and create some high-end web pages.
This is the article about detailed explanation of the example code of using transition and animation in vue. This is the end. For more related content of using transition and animation in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!