<!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. ZeroMQ初探

    概述 ZeroMQ(也称为 ØMQ,0MQ 或 zmq)是一个可嵌入的网络通讯库(对 Socket 进行了封装). 它提供了携带跨越多种传输协议(如:进程内,进程间,TCP 和多播)的原子消息的 so ...

  2. git用法-打补丁

    1. git cherry-pick 作用:从一个branch上选择一个commit,添加该commit到另一个branch上. 1. 切换到你想添加commit的分支上. git checkout ...

  3. iOS 手机摇一摇功能

    调用手机摇一摇功能其实很简单,在你调用的控制器的 viewDidLoad方法里调用 [UIApplication sharedApplication].applicationSupportsShake ...

  4. groovy学习(四)io

    package ch5 numbers = [11, 12, 13, 14]def staffTel = ['Ken' : 2745, 'John' : 2746, 'Jessie' : 2772]p ...

  5. 极光推送-Java后台实现方式一：Http API

    Java后台实现极光推送有两种方式,一种是使用极光推送官方提供的推送请求API:https://api.jpush.cn/v3/push,另一种则是使用官方提供的第三方Java APIjar包,这里先 ...

  6. Angular.js之指令学习笔记

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

  7. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  8. iOS 图片旋转方法

    iOS 图片旋转方法 通过 CGImage 或 CIImage 旋转特定角度 UIImage可通过CGImage或CIImage初始化,初始化方法分别为init(cgImage: CGImage, s ...

  9. Angular开发者指南（一）入门介绍

    什么是Angular AngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件.AngularJS的数据绑定和依 ...

  10. 关于Response.redirect和Response.End出现线程中止异常的处理

    最近做了一个项目其中使用了多线程获取POST过来的数据后再Response回复,但由于是多线程,在Response.End()的时候报出了异常: 2013-10-20 10:05:31,606 res ...