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. 黑马vue---59-60、组件中的data和methods

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...

  2. ailoop2里面的1个待考察的，在ailoop3里面的操作。(先使用海巨人，不使用英雄技能召唤图腾的问题)

    承接上一篇博客HearthBuddy Ai 调试实战2 在使用海巨人的时候,少召唤了一个图腾(费用是对的) 研究ailoop2里面4个待考察的,在ailoop3里面的后续操作.ailoop3一共有36 ...

  3. 常见Web攻击及解决方案

    DoS和DDoS攻击 DoS(Denial of Service),即拒绝服务,造成远程服务器拒绝服务的行为被称为DoS攻击.其目的是使计算机或网络无法提供正常的服务.最常见的DoS攻击有计算机网络带 ...

  4. 跨平台(win和unix)的线程封装类

    #ifdef WIN32 #include <Windows.h> #include <process.h> #else #include <pthread.h> ...

  5. 三、Navicat将远程MySql数据库数据导入本地

    1.安装本地的MySql.记住用户名和密码,这里以root,root为例. 2.打开Navicat,新建连接(连接),输入连接名,用户名,密码.确定,连接测试.这里连接名为luzhanshi.这样本地 ...

  6. Java同步数据结构之ConcurrentLinkedQueue

    前言 前面介绍的Queue都是通过Lock锁实现的阻塞队列,今天介绍一种非阻塞队列ConcurrentLinkedQueue,所谓非阻塞,其实就是通过CAS代替加锁来实现的高效的非阻塞队列.当许多线程 ...

  7. kotlin 类的继承

    与Java不同,kotlin 使用冒号,而Java 中使用extends, 注意冒号后面需要调用夫类的构造器.属于单继承,使用open 关键字允许继承class package loaderman.d ...

  8. Python实现的选择排序算法原理与用法实例分析

    Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...

  9. Python 零基础知识学习

      在开始学习Python之前,首先进入python shell ,输入:import this 命令,如下图所示: Python是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Py ...

  10. zabbix监控LAMP全教程

    一.安装前准备 A.下载yum源 1.备份/etc/yum.repos.d/CentOS-Base.repo ,在备份之前,要先安装wget 插件 #mv /etc/yum.repos.d/CentO ...