vue中animate.css用法

時間 2019-11-17

標籤 vue animate.css animate css 用法欄目 CSS 简体版

原文原文鏈接

1.先下載

cnpm install animate.css --save
複製代碼

2.引入

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

複製代碼

3.用法

<div v-if="nextStatus==false" ref="statusOne"
       <!--添加類名的方式-->
       class="animated rotateInDownRight">
      <div class="phone_number code_popup">
          <div class="phoneTitle">
              <span>+86</span>
          </div>
          <span>{{phoneNumber}}</span>
 </div>
複製代碼

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	向右上旋出