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. OpenResty之ngx_lua模块的加密接口

    原文: ngx_Lua模块中的加密api接口 ngx.crc32_short digest = ngx.crc32_short(str) 该方法主要是计算给定字符串 str 的循环校验码(Cyclic ...

  2. FreeMarker学习（springmvc配置）

    springMvc配置 <bean id="freemarkerConfig" class="org.springframework.web.servlet.vie ...

  3. [Java读书笔记] Effective Java(Third Edition) 第 7 章 Lambda和Stream

    在Java 8中,添加了函数式接口(functional interface),Lambda表达式和方法引用(method reference),使得创建函数对象(function object)变得 ...

  4. zookeeper-3.5.5安装报错：找不到或无法加载主类 org.apache.zookeeper.server.quorum.QuorumPeerMain

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jiangxiulilinux/artic ...

  5. socket常见问题

    socket编程中主动关闭VS被动关闭 tcp中server,client都可能是主动关闭方或者被动关闭方,现阐述下两者之间的关系: 客户端(client)                       ...

  6. Hadoop 部署之 Spark (六)

    目录 一.Spark 是什么 二.Scala的安装(所有节点) 三.Spark 安装(所有节点) 1.下载安装 2.配置 Spark 环境变量 四.Spark 配置(namenode01) 1.配置 ...

  7. kibana配置文件说明书

    #端口号 server.port: 5601 #kibana服务安装的地址 server.host: "192.168.122.21" #当使用代理时,这里可能对应的是加工后的ki ...

  8. Go语言实现bitmap算法

    有关bitmap算法的介绍资料网上很多,这里不赘述,各种语言的实现也不少,但是Go语言版的bitmap不多,本文就来写一个Go版的bitmap实现. 首先创建一个 bitmap.go 文件,定义一个b ...

  9. OpenCV.学习OpenCV.pdf

    1.Pdf.P160(书.P129) “表5-1:平滑操作的各总类型” 的列名 看起来很模糊,现在先把尽可能看得清的字记录下来: 平滑类型 名称 支持 No 输入数据类型 输出数据类型 简要说明 2. ...

  10. Own MusicPlayer隐私策略

    本地音乐播放器 此为Own MusicPlayer本地音乐播放器的隐私策略,本隐私策略内容会不定期更新,以最新内容为主. 若您已经阅读并了解以下内容后,并继续使用该软件,即表示您已同意该协议. 访问权 ...