<!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二维数组的深度学习（静态与动态）

    转自:http://developer.51cto.com/art/200906/128274.htm,谢谢 初始化: 1.动态初始化:数组定义与为数组分配空间和赋值的操作分开进行:2.静态初始化:在 ...

  2. PrintWriter用法简析

    public class PrintWriterextends Writer 向文本输出流打印对象的格式化表示形式.此类实现在 PrintStream 中的所有 print 方法.它不包含用于写入原始 ...

  3. Xamarin+Prism开发详解八：自动化测试之NUnit实践

    自动化测试很重要!很重要!以前多是手动测试,没有写过测试用例.这样的结果就是发现bug改了之后关联的其他功能又要从新测一遍.这样既浪费时间与成本,而且很无聊.之所以选择NUnit是公司需要,现在.ne ...

  4. 操作符、语句、函数——Javascript高级程序设计

    1.操作符 一元操作符:++.--放在变量前后的区别,+.—表示正负 位操作符:64位存储.32位计算,对NOT.AND.OR.XOR.<<.>>.>>>的掌 ...

  5. VS2010 MSDN的介绍

    5     cout << temp; 博客园第一篇文章的开始. VS2010 MSDN的文档介绍 https://msdn.microsoft.com/zh-cn/library/dd8 ...

  6. linux 下maven安装

    版本要求maven3.2.3 软件下载 wget http://mirror.bit.edu.cn/apache/maven/maven-3/3.2.3/binaries/apache-maven-3 ...

  7. 第24篇 js小知识和“坑”

    前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...

  8. 第十八篇 js高级知识---作用域链

    一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...

  9. Kafka Eagle 源码解读

    1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...

  10. Maven 使用笔记

    一:手动添加包进本地仓库 Maven 安装 JAR 包的命令是: mvn install:install-file -Dfile=jar包的位置 -DgroupId=[groupId] -Dartif ...