使用animate.css
2020-12-18 本文已影响0人
过年好_
//引入animate.css
//npm
npm install animate.css --save
或者yarn
yarn add animate.css
或者引CDN
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
然后就到了至关重要的时刻
<van-col class="h-100 animate__animated animate__backInDown" span="8">
无论用到什么动画都必须写animate__animated 然后后面就是你从官网上找到的动画效果animate__bounce
##Attention seekers
bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat
##Back entrances
backInDown
backInLeft
backInRight
backInUp
##Back exits
backOutDown
backOutLeft
backOutRight
backOutUp
##Bouncing entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
##Bouncing exits
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
##Fading entrances
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight
##Fading exits
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft
##Flippers
flip
flipInX
flipInY
flipOutX
flipOutY
##Lightspeed
lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft
##Rotating entrances
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
##Rotating exits
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
##Specials
hinge
jackInTheBox
rollIn
rollOut
##Zooming entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
##Zooming exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
##Sliding entrances
slideInDown
slideInLeft
slideInRight
slideInUp
##Sliding exits
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
##Copy class name to clipboard
https://animate.style
