快捷導(dǎo)航

vue2.0 和 animate.css的結(jié)合使用

更新時(shí)間：2017年12月12日 09:52:56 作者：課桌上畫(huà)青春

animate.css是一款前端動(dòng)畫(huà)庫(kù)，相似的有velocity-animate。這篇文章給大家介紹vue2.0 和 animate.css的結(jié)合使用，需要的朋友參考下吧

這里說(shuō)的是vue2.0和animate.css的結(jié)合使用。其實(shí)用過(guò)就知道用法是比較簡(jiǎn)單的。但是就是剛開(kāi)始使用的時(shí)候，難免有的會(huì)遇到各種問(wèn)題。簡(jiǎn)單的說(shuō)說(shuō)我所用過(guò)并且遇過(guò)的坑。

首先是transition組件，在2.0中由transition屬性變成了一個(gè)獨(dú)立的組件。

用法：

1、

要用animate.css，那么首先需要做的就是導(dǎo)入它。局部的導(dǎo)入的話，就在當(dāng)前的.vue文件中的style標(biāo)簽中導(dǎo)入：@import "animate.css"; 注意，導(dǎo)入css文件的時(shí)候。在末尾應(yīng)該是要加上分號(hào)的。如果不加的話，會(huì)影響后面寫(xiě)的局部樣式

2、

開(kāi)始使用animate.css

上述是一個(gè)完整的結(jié)構(gòu)。其中重要的幾個(gè)點(diǎn)用箭頭表示出來(lái)。首先在transition組件內(nèi)部，需要定義兩個(gè)基本的class類，表示過(guò)渡進(jìn)來(lái)和過(guò)渡出去的時(shí)候所要配合使用的animate.css的類值。zoomInLeft/zoomOutRight是其中的一對(duì)兒。具體的其他效果可以查看animate.css的官網(wǎng)。其次在transition組件內(nèi)部的話，需要過(guò)渡的子元素需要加上animated類。最后可能也是比較容易忽略的點(diǎn)（至少我就是）。這個(gè)v-show,看似好像是多余的，但是不加上的話，對(duì)于過(guò)渡效果是沒(méi)有用的。因?yàn)檫^(guò)渡是從一個(gè)無(wú)到有或者有到無(wú)的一個(gè)效果。最開(kāi)始進(jìn)來(lái)的時(shí)候如果元素本身就是show的，那么過(guò)渡就失效了。所以在元素上面需要加上這個(gè)v-show屬性。在過(guò)渡效果進(jìn)來(lái)的時(shí)候，v-show設(shè)置為true，相反為false。

還有一點(diǎn)是在上述代碼中沒(méi)有展現(xiàn)出來(lái)的，如果有多個(gè)子元素都要實(shí)現(xiàn)過(guò)渡，可以加上<transition-group></transition-group>進(jìn)行包裹。

PS：下面看一段實(shí)例代碼vue過(guò)渡和animate.css結(jié)合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動(dòng)畫(huà)</title>
  <script type="text/javascript" src="vue.js"></script>
  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
  <style type="text/css">
    p {
      width: 300px;
      height: 300px;
      background: red;
      margin: 10px auto;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
        el:'#box',
        data:{
          show:false
        }
      })
    }
  </script>
</head>
<body>
  <div id="box">
    <!-- 控制數(shù)據(jù)的值切換顯示隱藏 -->
    <button @click="show=!show">transition</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> -->
    <!-- 多元素運(yùn)動(dòng) -->
    <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>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的vue2.0 和 animate.css的結(jié)合使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: