vue教程3-02 vue动画

以下代码，已经用包管理器下载好vue,animate

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="bower_components/vue/dist/vue.js"></script>

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

    <style>

        #box{

            width:400px;

            margin: 0 auto;

        }

        #div1{

            width:100px;

            height:100px;

            background: red;

        }

    </style>

</head>

<body>

    <div id="box">

        <input type="button" value="按钮" @click="toggle">

        <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>

    </div>

    <script>

        new Vue({

            el:'#box',

            data:{

                bSign:true

            },

            methods:{

                toggle(){

                    this.bSign=!this.bSign;

                }

            },

            transitions:{ //定义所有动画名称

                bounce:{

                    enterClass:'zoomInLeft',//动画进入

                    leaveClass:'zoomOutRight'//动画离开

                }

            }

        });

    </script>

</body>

</html>

vue教程3-02 vue动画的更多相关文章

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  5. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  6. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  7. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  8. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  9. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. Win7 VS2015及MinGW环境编译矢量库agg-2.5和cairo-1.14.6

    书接上文,昨天装了MinGW,主要原因之一是要用到MSYS,所以顺手把FFMPEG又编译了一遍. 回到主题,其实我是想编译矢量库,因为最近要学习一些计算几何算法,所以找个方便的2D画图库就很重要. 说 ...

  2. 学习node.js的C++扩展

    本想买本书,可是太贵,了一下作者可惜没有回应,不然也会去支持一下.于是自己baidu罗.先是从这个入手 安装好环境 https://github.com/nodejs/node-gyp#install ...

  3. VS SVN

    AnkhSVN - Subversion Support for Visual Studio    直接包管理中就可以安装 VS2015和SVN合作 Visual Studio 添加SVN插件 Ank ...

  4. Android SimpleAdapter ViewBinder

  5. 在Win环境下配置java的环境进行开发步骤

    1.下载官方JDK,网址如下 http://www.oracle.com/technetwork/java/javase/downloads/index.html

  6. J - Oil Skimming 二分图的最大匹配

    Description Thanks to a certain "green" resources company, there is a new profitable indus ...

  7. Apache中 RewriteCond 规则参数介绍

    RewriteCond指令定义了规则生效的条件,即在一个RewriteRule指令之前可以有一个或多个RewriteCond指令.条件之后的重写规则仅在当前URI与Pattern匹配并且满足此处的条件 ...

  8. WPF 嵌入Winform GDI 、 开启AllowsTransparenc问题

    此文章可以解决2至少2个问题: 1.开启AllowsTransparenc造成的GDI+组件不显示问题 2.WPF 组件无法覆盖嵌入WPF窗口的任何第三方GDI+组件上层 方案1:自制双层 原理:用一 ...

  9. JVM调优推荐

    此文已由作者赵计刚薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.JVM的调优主要是内存的调优,主要调两个方面: 各个代的大小 垃圾收集器选择 2.各个代的大小 常用的 ...

  10. .NET Core中使用EF Core连接MySQL

    最近一直在捣鼓.NET Core方面的东西,顺便写下点东西记录下 1.打开vs2017,新建一个项目 2.vs会自动生成一个项目,然后打开NuGet搜索MySql.Data.EntityFramewo ...