vue2.0學習筆記（第六講）（bower的安裝與使用、動畫庫animate.css的使用）詳情 - vue.js,bower,transition 倩兒愛甜食博客

一、bower的安裝與使用

bower是一個類似於npm的包管理工具，只不過npm更偏向於後台，而bower更偏向於前端。我們同樣也是需要通過npm的方式來下載bower。我們在cmd當中鍵入命令-> npm install bower -g來完成將bower下載安裝到npm的全局目錄下，由於我們之前已經把npm的全局安裝目錄配置到環境變量當中了，故下載完成後，不再需要配置環境變量。之後我們可以在任意目錄下，通過cmd鍵入命令-> boewr --version，顯示如下結果，則説明bower安裝成功。

圖片描述

常用的bower命令有：

bower install 包名
下載安裝包，我們可以使用bower install 包名#版本號來下載指定版本號的包。
bower uninstall 包名
卸載安裝包
bower info 包名
查看這個包的相關的版本信息，可以看到這個包從最初到最新的所有版本信息。

我們在使用bower進行包的管理之前，一般都需要在本機上完成git的安裝，因為需要從git倉庫獲取一些代碼包。git的安裝見文章 git與github的使用。

我們之前是通過vue的官網把vue.js文件下載到本地，然後通過script標籤的方式來引入的。現在我們也可以使用bower的方式來下載vue.js文件，我們在項目文件夾下，打開cmd鍵入命令-> bower install vue。在下載完成之後，在項目文件夾下會生成一個名為bower_components的文件夾。在該文件夾下有vue文件夾，在內部的dist文件夾下有vue.js文件。可以通過<script src="bower_components/vue/dist/vue.js"></script>的方式來引入。

我們常用bower當中的info命令來查看某個包的版本信息。

二、動畫庫animate.css的使用

animate.css是一個css3動畫庫，裏面預設了很多種常用的動畫，使用也很簡單，因為它是把不同的動畫綁定到不同的類裏，所以我們想要使用哪種動畫的時候，只需要簡單的把那個相應的類添加到元素上就行了。

我們同樣可以通過bower的方式來下載animate.css庫文件，我們在項目文件夾下，通過cmd來鍵入命令-> bower install animate.css。下載完成之後，在項目文件夾當中的bower_components的文件夾下多了一個animate.css文件夾。我們可以在主文件當中通過<link rel="stylesheet" href="bower_components/animate.css/animate.css">來完成引包。

然後我們給要運動的元素添加上animated類以及特定的動畫類名，animated是每個要進行動畫的元素都必須要添加的類，表示調用animate.css文件。示例代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <style>
        #test{
            width:200px;
            height:200px;
            background-color: skyblue;
            margin:100px auto;
        }
    </style>
    <script>
        $(function(){
            $('#show').on('click',function(){
                $('#test').removeClass('bounceOutRight');
                $('#test').addClass('animated bounceInLeft');
            });
            $('#hide').on('click',function(){
                $('#test').removeClass('bounceInLeft');
                $('#test').addClass('animated bounceOutRight');
            });
        });
    </script>
</head>
<body>
    <button id="show">顯示</button>
    <button id="hide">離開</button>
    <div id="test"></div>
</body>
</html>

當我們點擊顯示按鈕時，藍色方塊從左邊彈跳進入，當點擊離開按鈕時，藍色方塊從右邊彈跳離開。更多的動畫類名我們可以在Animate.css的官網進行查看。

在vue2.0當中我們可以使用transition組件標籤配合animate.css來製作出各種過渡動畫的效果。我們可以用transition標籤來包裹住要運動的那個dom元素，並給該transition標籤加上屬性enter-active-class和leave-active-class，然後再給這兩個屬性值加上添加上animated類以及特定的動畫類名。示例代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
        .test{
            width:200px;
            height:200px;
            background-color: skyblue;
            margin:100px auto;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    a:false
                },
                methods:{
                    toggle:function(){
                        this.a = !this.a;
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <button @click="toggle()">toggle</button>
        <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
            <div class="test" v-show="a"></div>
        </transition>
    </div>
</body>
</html>

當我們點擊toggle按鈕時，可以切換實現藍色方塊從左邊彈跳進入和從右邊彈跳離開的動畫效果。

但是transition標籤只能用於包裹單個運動元素，如果有多個dom元素想要實現動畫效果，則我們需要使用transition-group標籤來包裹這些運動的元素，並且內部的dom標籤元素必須都加上屬性:key，並給其賦予不同的屬性值以示區分。示例代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <script src="bower_components/vue/dist/vue.js"></script>
    <style>
        .test{
            width:100px;
            height:100px;
            background-color: skyblue;
            margin:30px auto;
            text-align: center;
            line-height: 100px;
            color:white;
            font-size: 20px;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    a:false,
                    arr:[1,2,3,4]
                },
                methods:{
                    toggle:function(){
                        this.a = !this.a;
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <button @click="toggle()">toggle</button>
        <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
            <div class="test" v-show="a" v-for="(value,index) in arr" :key="index">{{value}}</div>
        </transition-group>
    </div>
</body>
</html>

當我們點擊toggle按鈕時，可以切換實現四個藍色方塊同時從左邊彈跳進入和同時從右邊彈跳離開的動畫效果。

我們還可以把animate.css配合aniAuto（一個基於 animate.css 的jquery插件）來使用，從而來製作出更多更復雜的動畫效果。其下載地址及使用文檔見 https://github.com/justinzzc/...

倩兒愛甜食博客

倩兒愛甜食博客

博客 / 詳情