在VUE中使用CSS动画animate.css动画(持续更新)

官方连接 https://github.com/daneden/animate.css

英文的，因此本身总结下：

官方说明：

$('#yourElement').addClass('animated bounceOutLeft');

可是在vue中步骤以下

安装  npm install animate.css --save安装，在引入

首先查到的是这种方式，引入

// import animated from 'animate.css'

// Vue.use(animated)

最后改用这种比较好，在须要的地方引入下

// 直接在须要的位置进行引入 import @'../../node_modules/animate.css/animate.css'

使用的时候也简单,只须要管开始效果 enter-active-class 和 结束效果 leave-active-class

网上样例以下，已经测试验证过

<div id="box">
            <!-- 控制数据的值切换显示隐藏 -->
            <button @click="show=!show">点我展现效果</button>
            
            <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
              <p v-show="show" class="animated"></p>
            </transition>
          
            <!-- 第二种方法 -->
            <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
              <p v-show="show"></p>
            </transition> -->
          
            <!-- 多元素运动 -->
            <!-- <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
              <p v-show="show" class="animated" :key="1"></p>
              <p v-show="show" class="animated" :key="2"></p>
            </transition-group> -->
          </div>

 

标绿为已经验证的，直接替换须要就能够了，对于后端来讲这些暂时应该够用了

<div class="div001">
          <button @click="show2=!show2">点我展现效果</button>
            
          <transition enter-active-class="rotateIn" leave-active-class="rotateOut">
            <p v-show="show2" class="animated">
              <img src="@/assets/image/img_01.jpg" style="height:200px;width:auto;"  alt="">
            </p>
          </transition>
          
        </div>

 

bounce                   弹跳，反弹，弹起
flash                    闪现，一瞬间，反射
pulse                    跳动，脉冲，脉跳
rubberBand               橡皮圈，橡皮带
shake                    摇动，震动
swing                    旋转，悬挂，摇摆
tada                     时间，波幅范围
wobble                   摆动， 摇晃，不稳定
jello                    凝聚
bounceIn                 放大弹跳，
bounceInDown             从上面跳跳来
bounceInLeft             从左边出现
bounceInRight            从右边出现
bounceInUp               从下面上来
bounceOut                从上面下去
bounceOutDown            从原来的位置跳下去
bounceOutLeft            从原来的位置跳到左边去
bounceOutRight           从原来的位置跳到右边去
bounceOutUp              从原来的位置跳到上面去
fadeIn                   总体渐入，淡淡的隐现
fadeInDown               从上向下渐入    
fadeInDownBig            从上向下直接滑动下来
fadeInLeft               从左向右渐入
fadeInLeftBig            从左向右直接滑动
fadeInRight              从右向左渐入
fadeInRightBig           从右向左直接滑动
fadeInUp                 从下向上渐入
fadeInUpBig              从下向上直接滑动
fadeOut                  渐出
fadeOutDown              从上向下渐出
fadeOutDownBig           从上向下直接滑动出去
fadeOutLeft              从左向右渐出
fadeOutLeftBig           从左向右直接滑动出去
fadeOutRight             从右向左渐出
fadeOutRightBig          从右向左直接滑动出去
fadeOutUp                从下向上渐出
fadeOutUpBig             从下向上直接滑动出去
flipInX                  水平翻转呈现
flipInY                  垂直翻转呈现
flipOutX                 水平翻转消失
flipOutY                 垂直翻转消失
lightSpeedIn             轻轻的呈现 倾斜
lightSpeedOut          轻轻的消失 倾斜 rotateIn                 旋转呈现 rotateInDownLeft         从左向右转动渐入 从上向下转动            转动:没有旋转到一周  rotateInDownRight        从右向左转动渐入 从上向下转动            转动:没有旋转到一周   rotateInUpLeft           从右向左转动渐入 从下向上转动 rotateInUpRight          从左向右转动渐入 从下向上转动            转动:没有旋转到一周           rotateOut                旋转消失 rotateOutDownLeft        从左向右转动渐出 从上向下转动            转动:没有旋转到一周  rotateOutDownRight       从右向左转动渐出 从上向下转动            转动:没有旋转到一周  rotateOutUpLeft          从右向左转动渐出 从下向上转动            转动:没有旋转到一周  rotateOutUpRight         从左向右转动渐出 从下向上转动            转动:没有旋转到一周  hinge                    定点转动 rollIn                   翻滚旋转渐入                              旋转：转动一周 rollOut                  旋转渐出                              旋转：转动一周 zoomIn                   放大渐入 zoomInDown               从上向下出现同时放大 zoomInLeft               从右向左出现同时放大 zoomInRight              从左向右出现同时放大 zoomInUp                 从下想上出现同时放大 zoomOut                  缩小渐出 zoomOutDown              从上向下消失同时缩小 zoomOutLeft              从右向左消失同时缩小 zoomOutRight             从左向右消失同时缩小 zoomOutUp                从下向上消失同时缩小 slideInDown              从上向下滑动 slideInLeft              从右向左滑动 slideInRight             从左向右滑动 slideInUp                从下向上滑动 slideOutDown             从原来的位置向下滑动 slideOutLeft             从原来的位置从左滑动 slideOutRight            从原来的位置向右滑动 slideOutUp               从原来的位置向上滑动