<!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. Sublime Text 3 修改配色主题【侧边框之...】

    Sublime Text3 是挺喜欢的一款编辑器,一周五天朝九晚六面对,而默认的侧边栏颜色总显得不尽人意.右侧的代码高亮[color_scheme:Monokai]挺喜欢的,心里就想着如何把侧边栏也给 ...

  2. PHP中的 !== 与 ！=

    '==' 比较两边的值是否相等,会自动转换类型: '===' 则会严格比较类型是否相同,如果类型不相同,直接返回false. 例如:'123' === 123 // => false '!=' ...

  3. Python 接口测试（一）

    @font-face { font-family: "Times"; }@font-face { font-family: "宋体"; }@font-face ...

  4. win8配置JDK

    有很多新手朋友对win7 和win8里的环境变量不是很熟悉,下面我整理了一下: 首先要说一下,win7里和win8配置方法是相同的,配置之前先去百度一下 JDK 然后找到自己电脑系统对应的jdk版本下 ...

  5. NoSql研究报告

    NoSql研究报告 1.概述 随着互联网的不断发展,信息系统的数据变得越来越多,关系型数据库逐渐面临着难以克服的障碍,主要体现在: 对数据库的高并发读写需求 对海量数据的高效率存储和访问需求 对数据库 ...

  6. asp.net EF+MVC+Bootstrap 通用后台管理系统

    需要源码,请加QQ:858-048-581 开发环境: VS2012或以上 数据库: SQL Server 2008R2或以上   基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级 ...

  7. css修炼宝典

    前端岗位目前确实十分火热,但是就业压力也很大:前一段时间与大学同学交谈,他向我哭诉说去一个机构学习了前端工程师,我心底里为他高兴,因为他马上就可以月薪突破10K了,可是不幸的是他说去北京面试一个月,还 ...

  8. 9 个用于移动APP开发的顶级 JavaScript 框架

    顶级 Java 框架 对于Web开发而言,Java是一个有前途的编程语言,并且在不久的将来它将依然在这个领域大放光彩.Java在移动app开发上也有同样的影响吗?让我们一起来看看ValueCoders ...

  9. 事件日志：无法加载站点/服务的所有 ISAPI 筛选器。因此启动中止。

    事件日志:无法加载站点/服务的所有 ISAPI 筛选器.因此启动中止. Service Unavailable解决 故障状态:Internet 信息服务(IIS)管理器 里 应用程序池出现错误 “应用 ...

  10. 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码

    今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...