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. 静态库和动态库的区别和win平台和linux平台代码实现

    静态库和动态库的区别   什么是库 库是写好的,现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说,库是一种可 ...

  2. [java]察看两个日期间差多少秒/小时/天

    Java 中Date类getTime()的方法返回从1970-1-1以来的毫秒数,这是下面函数运行的基础. package com.example.demo; import java.text.Par ...

  3. linux之i2c子系统维护者源码仓库地址

    仓库地址: git://git.kernel.org/pub/scm/linux/kernel/git/wsa/linux.git

  4. docker下搭建owncloud

    在ubuntu下 搭建owncloud 用docker-compose启动,owncloud.yml文件内容 owncloud: image: owncloud: restart: always 开机 ...

  5. 图解centos7如何关闭ipv6仅使用ipv4

    方法/步骤     使用ifconfig命令查看网卡信息,如果出现inet6 fe80::20c:29ff:fed0:3514,说明机器开启了ipv6,如下图所示:   编辑/etc/sysctl.c ...

  6. 002-log-log4j

    一.概述 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护 ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_06-vuejs研究-vuejs基础-v-on指令

    3.v-on绑定一个按钮的单击事件 计算的按钮上加事件 点击计算的按钮,弹出的事件 定义一个Result的变量

  8. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_22-CMS前端页面查询开发-Api调用-跨域解决

    点击页面查询按钮 ,报错.跨域问题. 前端端口是11000 请求后端的服务地址端口是31001 出现跨域 开始解决跨域 把前面带端口的地址 用变量代替 只有带/api/cms开头的就转发的服务端310 ...

  9. Python排序算法之选择排序定义与用法示例

    Python排序算法之选择排序定义与用法示例 这篇文章主要介绍了Python排序算法之选择排序定义与用法,简单描述了选择排序的功能.原理,并结合实例形式分析了Python定义与使用选择排序的相关操作技 ...

  10. 一个数独引发的惨案：零知识证明（Zero-Knowledge Proof）

    导言:原文的作者是著名的Ghost和Spectre 这两个协议的创始团队的领队Aviv Zohar.原文作者说他的这篇原文又是引用了以下这两篇学术论文: How to Explain Zero Kno ...