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. TNetHttpClient的用法

    TNetHttpClient的用法 TNetHttpClient是DELPHI XE8新增加的控件. 在之前,我们一般都是使用IDHTTP控件,但在安卓.IOS等非WINDOWS平台,IDHTTP访问 ...

  2. [MyBatis]org.apache.ibatis.binding.BindingException的避免

    我遇到的org.apache.ibatis.binding.BindingException问题是因为Mapper.java中接口和SQL的参数多于一个,Mybatis不知道如何一一对应,解决方法是加 ...

  3. LightGBM两种使用方式

    原生形式使用lightgbm(import lightgbm as lgb) import lightgbm as lgb from sklearn.metrics import mean_squar ...

  4. ubuntu tensorflow cpu faster-rcnn train data

    (flappbird) luo@luo-All-Series:~/MyFile/tf-faster-rcnn_box$ (flappbird) luo@luo-All-Series:~/MyFile/ ...

  5. 配置WEB错误页面

    项目运行时,难免会出现错误,这些错误我们不可以也不方便直接让用户看到,所以配置错误页面是非常必要的. 一下是项目的Web.xml文件,在最下方阴影部分是配置错误界面. <?xml version ...

  6. java泛型中特殊符号的含义

    java泛型中的标记符含义:  E - Element (在集合中使用,因为集合中存放的是元素) T - Type(Java 类) K - Key(键) V - Value(值) N - Number ...

  7. scikit-learn机器学习(一)简单线性回归

    # -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt ## 设置字符集,防止中文乱码 import ma ...

  8. 使用xdebug调试程序后程序很慢的原因

    有一个原因就是开启调试的会话没有正确的关闭,即PhpStorm这边关闭了而没有通知服务端xdebug关闭,导致服务器资源被耗尽,这时只有重启服务端的服务才可以. 所以必须保证每一个调试会话被正确关闭. ...

  9. tensorflow搭建神经网络

    最简单的神经网络 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt date = np.linspa ...

  10. linux netfilter

    yum -y install iptables//三张表 filter nat mangle [root@wang /]# iptables -t filter -nvL [root@wang /]# ...