vue2.0學習筆記（第六講）（bower的安裝與使用、動畫庫animate.css的使用）

時間 2019-11-16

標籤 vue2.0 vue 學習筆記第六 bower 安裝使用動畫 animate.css animate css 欄目 CSS 简体版

原文原文鏈接

1、bower的安裝與使用

bower是一個相似於npm的包管理工具，只不過npm更偏向於後臺，而bower更偏向於前端。咱們一樣也是須要經過npm的方式來下載bower。咱們在cmd當中鍵入命令-> npm install bower -g來完成將bower下載安裝到npm的全局目錄下，因爲咱們以前已經把npm的全局安裝目錄配置到環境變量當中了，故下載完成後，再也不須要配置環境變量。以後咱們能夠在任意目錄下，經過cmd鍵入命令-> boewr --version，顯示以下結果，則說明bower安裝成功。css

經常使用的bower命令有：html

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>的方式來引入。vue

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

2、動畫庫animate.css的使用

animate.css是一個css3動畫庫，裏面預設了不少種經常使用的動畫，使用也很簡單，由於它是把不一樣的動畫綁定到不一樣的類裏，因此咱們想要使用哪一種動畫的時候，只須要簡單的把那個相應的類添加到元素上就好了。css3

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

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

<!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的官網進行查看。npm

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

<!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/...