vue2.0学习笔记（第六讲）（bower的安装与使用、动画库animate.css的使用）

一、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/...

vue2.0学习笔记（第六讲）（bower的安装与使用、动画库animate.css的使用）

一、bower的安装与使用

二、动画库animate.css的使用

倩儿爱甜食

引用和评论

前端自动化构建之Gulp的使用（学习笔记）

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

Vue.js-方法与事件

Vue使用mixins

startViewTransition的简单示例