vue2.0和animate.css的結合使用

這里說的是vue2.0和animate.css的結合使用。其實用過就知道用法是比較簡單的。但是就是剛開始使用的時候，難免有的會遇到各種問題。簡單的說說我所用過并且遇過的坑。

成都創新互聯成立于2013年，先為安徽等服務建站，安徽等地企業，進行企業商務咨詢服務。為安徽企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

首先是transition組件，在2.0中由transition屬性變成了一個獨立的組件。

用法：

1、

要用animate.css，那么首先需要做的就是導入它。局部的導入的話，就在當前的.vue文件中的style標簽中導入：@import "animate.css"; 注意，導入css文件的時候。在末尾應該是要加上分號的。如果不加的話，會影響后面寫的局部樣式

2、

開始使用animate.css

vue2.0 和 animate.css的結合使用

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

還有一點是在上述代碼中沒有展現出來的，如果有多個子元素都要實現過渡，可以加上<transition-group></transition-group>進行包裹。

PS：下面看一段實例代碼vue過渡和animate.css結合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動畫</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">
    <!-- 控制數據的值切換顯示隱藏 -->
    <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> -->
    <!-- 多元素運動 -->
    <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>

總結

以上所述是小編給大家介紹的vue2.0 和 animate.css的結合使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

網站名稱：vue2.0和animate.css的結合使用
URL網址：http://m.kartarina.com/article16/pipjdg.html

成都網站建設公司_創新互聯，為您提供網站內鏈、品牌網站設計、自適應網站、動態網站、營銷型網站建設、全網營銷推廣

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容