animate.css是一款前端动画库，相似的有velocity-animate。

上述是一个完整的结构。其中重要的几个点用箭头表示出来。首先在transition组件内部，需要定义两个基本的class类，表示过渡进来和过渡出去的时候所要配合使用的animate.css的类值。zoomInLeft/zoomOutRight是其中的一对儿。具体的其它效果可以查看animatecss的官网。其次在transition组件内部的话，需要过渡的子元素需要加上animated类。最后可能也是比较容器忽略的点，这个v-show看似好像是多余的，但是不加上的话，对于过渡效果是没用的。因为过渡是从一个从无到有的一个效果。最开始进来的时候如果元素本身是show 的，那么过渡就失效了。所以在元素上面需要加上这个v-show属性。在过渡进来的时候，v-show设置为true，相反为false。

下面看一段实例代码vue过渡和animate.css结合使用

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>动画</title>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="external nofollow" />

</head>

<body>

    <div id="box">

        <!-- 控制数据的值切换显示隐藏 -->

        <button @click="show=!show">transition</button>

        <transition name="" mode="" enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">

            <p v-show="show" class="animated">第一种方法</p>

        </transition>

        <transition name="" mode="" enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">

            <p v-show="show">第二种方法</p>

        </transition>

        <!-- 多元素运动 -->

        <transition-group tag="" name="" 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>

    <script>

        window.onload = function(){

            var app = new Vue({

                el:'#box',

                data:{

                    show:false

                }

            })

        }

    </script>

</body>

</html>

vue2.0和animate.css的结合使用的更多相关文章

  1. vue2.0-transition配合animate.css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0引入现有css文件

    1.在vue文件中的<style>内填写需要引用的文件 如: @import "./css/indexTest.css";

  3. vue 结合 animate.css

    这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...

  4. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...

  5. vue2+animate.css

    下载animate.css并引入项目, import './css/animate.css'使用: <template> <div class="box"> ...

  6. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  7. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

  8. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...

  9. Vue2.0

    Vue 1.0到2.0的变化: 1.在每个组件的模板中,不再支持片段代码 组件中的模板: 之前: <template> <h3我是组件<strong>我是加粗模板< ...

随机推荐

  1. mysql中的union操作（整理）

    mysql中的union操作(整理) 一.总结 一句话总结: union两侧的字段数和字段类型要是一样的 union可以接多个 orderby和排序可以在最后的union组合之后 1.union简单实 ...

  2. php学习之Model类

    <?php $config = include 'config.php'; //引入数据库配置文件 $model = new Model($config); //测试案例 // $saveDat ...

  3. LC 986. Interval List Intersections

    Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order ...

  4. php+mysql模糊查询功能

    一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有 ...

  5. 【如何设置IIS程序池的回收时间，才能最大程度的减少对用户的影响?】

    作为.Net开发人员,其实对IIS的应用程序池知之甚少,前段时间被问到一个问题: 对于互联网web应用,如何在用户毫无感知的情况下回收程序池?(对用户产生最小的影响) 简单理解IIS应用程序池 应用程 ...

  6. 004-jdk-数据结构-ArrayList、LinkedList

    一.ArrayList概述 数组集合,无容量限制,非线程安全 ArrayList.Vector是线性表,使用Object数组作为容器去存储数据的,添加了很多方法维护这个数组,使其容量可以动态增长,极大 ...

  7. Thinking - 一些有效阅读的方法

    有策略,忌盲目.讲方法,别蛮干! 1- 阅读方法 1.1 做好眼前事 排除其他事项干扰,营造适合阅读的状态和环境,专注地投入阅读之中. 如果被一堆乱糟糟的事情烦扰,身心处于一个疲惫的状态,必然无法保持 ...

  8. DB2的web可视化客户端工具

    DB2 是IBM公司的产品,目前在银行等金融行业还在大量使用, DB2的客户端工具太,并且难用,这是一直为人所垢病的,  现在TreeSoft数据库管理系统已支持DB2了,直接在浏览器中就可以操作查看 ...

  9. 第一章 python+selenium自动化测试实战

    @序章 自动化测试是软件测试的主流方向之一: 教程从测试的根本需求出发,讲解如何开展自动化测试. 首先,我们要明白,自动化仅仅是满足我们某种需求的一种工具:没有必要花费时间把它全部弄懂:我们只需要学会 ...

  10. flask不得不知的基础

    python与flask不得不说的小秘密 常识引入 什么是装饰器? 在不改变源码的前提下,对函数之前前后进行功能定制. 开放封闭原则:不改变函数内部代码,在函数外部进行修改. 基本写法 import ...