vue use in wowjs
Use wow.js in vue, if not implemented in the following way, there will be unexpected BUG, after all the pictures on the page refreshes suddenly see it, is the addition of a hidden attribute, we recommend strict accordance with the method, not free to use
(1) Installation npm by:
npm install wowjs --save-dev
animate.css installed automatically.
(2) introducing the animate.css in main.js
import 'animate.css'
introduced into the assembly where needed wowjs
There are two ways:
- import {WOW} from 'wowjs' mounted() { new WOW().init() }
2.import WOW from 'wowjs' mounted() { new WOW.WOW().init() }
In order to test a variety of animation class class name below. (Best is straightaway)
WOW Rollin left to right, scrolling clockwise transparency from 100% to change the set value
wow bounceIn occurs from the home position, from small to large exceeds the set value, then a small change in the set value, then return to the set value, the transparency from 100% to change the set value
wow bounceInUp from the bottom up, pounced later portion will then spring back upwards beyond the transparency setting value unchanged
wow bounceInDown from the top down, after the fall then bounce would exceed the down part of it, to set the transparency value unchanged
wow bounceInLeft from left to right, the future will move over to the right beyond the elastic part and then left it, transparency is the set value unchanged
wow bounceInRight from right to left the future will move over to the left and then right beyond the part about the bomb, transparency is the set value unchanged
wow slideInUp from the bottom up, after up to a fixed set position, opacity setting value is unchanged (up from the bottom is to a) (if the elements in the bottom, will distraction height of the box)
WOW slideInDown from the top down to the set position is fixed onto the transparency value is set constant
wow slideInLeft From left to right, back up to the set position is fixed, the set value is unchanged transparency (left is left to right)
WOW slideInRight from right to left, back up to the set position is fixed, the set value is not transparency variable
wow lightSpeedIn from right to left, the first head tilted to the right, and tilted to the left, and finally to the original shape, the transparency from 100% to change the set value
wow pulse amplification original position a little shrinking to its original size, transparency set value change (for better execution times with animation attributes effect)
wow flipInX original reclined position before planting, the transparency setting value changes from 100% to
about wow flipInY original position rotating transparency from 100% to change the set value
wow bounce shake up and down, the transparency setting value constant (complex animation execution the number and duration of the animation properties can be achieved also shake violently or slowly shaking)
WOW shake shake about transparency set value unchanged (with animation execution times and duration of the animation properties can be achieved also shake violently or slowly shaking)
wow swing from right to left, the first head tilted to the right, and tilted to the left, and finally to the original shape, the transparency of the set value constant
wow bounceInU original position unchanged, is never displayed on the display directly (without through a transition effects)
WOW wobble constant home position, similar to a standing person about that head shaking, transparency setted value
Links: https://blog.csdn.net/weixin_40292626/article/details/80277182
The following applications are given in the examples:
<li class="wow slideInUp" v-for="(item, index) in cases" :key="index">