<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</title>

    <script type="text/javascript" src="vue.js"></script>

    <link rel="stylesheet" type="text/css" href="animate.css">

    <style type="text/css">

        p {

            width: 300px;

            height: 300px;

            background: red;

            margin: 10px auto;

        }

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var app = new Vue({

                el:'#box',

                data:{

                    show:false

                }

            })

        }

    </script>

</head>

<body>

    <div id="box">

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

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

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

            <p v-show="show" class="animated"></p>

        </transition> -->

        <!-- 第二种方法 -->

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

            <p v-show="show"></p>

        </transition> -->

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

        <transition-group 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>

</body>

</html>

vue过渡和animate.css结合使用的更多相关文章

  1. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  2. vue 动画框架Animate.css @keyframes

    <script src="vue.js"></script> <link rel="stylesheet" href=" ...

  3. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  4. 048——VUE中使用animate.css动画库控制vue.js过渡效果

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

  5. 在vue中使用animate.css

    animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...

  6. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  7. vue2.0和animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate. 上述是一个完整的结构.其中重要的几个点用箭头表示出来.首先在transition组件内部,需要定义两个基本的clas ...

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

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

  9. vue 结合 animate.css

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

随机推荐

  1. Java编程规范（一）

    最近在看一本有关Java编程规范的书,书中精炼阐述了使用java语言时应该遵循的一些原则.接下来的一段时间我将在这里总结我的学习内容,也希望这一系列文章能够对有需要的人有所帮助. 不考虑任何编码规范的 ...

  2. 使用Python实现子区域数据分类统计

    目录 前言 geopandas简介 子区域数据分类统计 总结 一.前言        最近碰到一个需求,需要统计某省内的所有市的某数据分布情况信息.现有该省的数据分布情况以及该省的行政区划数据.我通过 ...

  3. 事件详解<一>

    一 扭转对事件的认知 事件,是js和html交互的桥梁.当用户操作页面上的元素,比如点击,鼠标移入移出,然后做一些事情. 你若触发,我便执行--事件发生,调用它的处理函数执行相应的JavaScript ...

  4. 对synchronized关键字的理解

    先看两个线程同时访问一个对象的例子. public class Account { private String accountNo; private double balance; public A ...

  5. vc release模式设置断点调试

    在VC release模式做如下设置:在 工程->属性->c/c++->常规->调试信息格式选择 -> 程序数据库(/Zi) 在 工程->属性->链接器-&g ...

  6. 《深入理解java虚拟机-高效并发》读书笔记

    Java内存模型与线程 概述 多任务处理在现代计算机操作系统中几乎已是一项必备的功能,多任务运行是压榨手段,就如windows一样,我们使劲的压榨它运行多个任务,俱要high又要耍.并发则是另外一种更 ...

  7. Regular Expression(正则表达式)之邮箱验证

    正则表达式(regular expression, 常常缩写为RegExp) 是一种用特殊符号编写的模式,描述一个或多个文本字符串.使用正则表达式匹配文本的模式,这样脚本就可以轻松的识别和操作文本.其 ...

  8. 读书笔记 effective c++ Item 10 让赋值运算符返回指向*this的引用

    一个关于赋值的有趣的事情是你可以将它们链在一起: int x, y, z; x = y = z = ; // chain of assignments 同样有趣的是赋值采用右结合律,所以上面的赋值链被 ...

  9. javascript 常用api

    常用API合集 来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称, ...

  10. 为效率而生:开源Mac版Google Authenticator认证客户端GoldenPassport

    最近运维同学为了提高安全性,用Google Authenticator对服务器加了双重认证,此后登录服务器需要先输入动态密码,在输入服务器密码.Google Authenticator相当于软toke ...