<!-- bower-> （前端）包管理器

    npm install bower -g

        验证: bower --version

bower install <包名>

bower uninstall <包名>

bower info <包名>    查看包版本信息

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

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <style>

        #div1{

            width:100px;

            height:100px;

            background: red;

        }

        .fade-transition{  //整体动画

            transition: 1s all ease;

        }

        .fade-enter{  //进入：

            opacity: 0;

        }

        .fade-leave{ //离开：

            opacity: 0;

            transform: translateX(200px);  //右边飞

        }

    </style>

</head>

<body>

    <div id="box">

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

        <div id="div1" v-show="bSign" transition="fade"></div>  <!--transition="fade" 固定写法：动画名称-->

    </div>

    <script>

        new Vue({

            el:'#box',

            data:{

                bSign:true

            },

            methods:{

                /*toggle:function(){

                    alert(1);

                }*/

                toggle(){//es6语法，等价上面写法，

                    this.bSign=!this.bSign;

                }

            }

        });

    </script>

</body>

</html>
<!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">

    <!-- 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:{//动画名称 transition="bounce"

                    enterClass:'zoomInLeft',

                    leaveClass:'zoomOutRight'

                }

            }

        });

    </script>

</body>

</html>

vue18 动画的更多相关文章

  1. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

  2. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  3. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  4. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  5. 虾扯蛋：Android View动画 Animation不完全解析

    本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...

  6. Visaul Studio 常用快捷键的动画演示

    从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...

  7. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  8. 再谈CAAnimation动画

    CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...

  9. jQuery动画-圣诞节礼物

    ▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...

随机推荐

  1. 【BZOJ 1207】[HNOI2004]打鼹鼠

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 时间是按顺序的. 所以就有单调性啦. 写个DP就好. 设f[i]表示打第i只鼹鼠,最多能打几只鼹鼠. 则如果i和j的距离不超过它们的 ...

  2. 和同事合作开发，使用局域网 git创建本地仓库

    转自原文 和同事合作开发,使用局域网 git创建本地仓库 1.仓库 建一个空文件夹来做仓库,例如建为 cangku 1.1 cd 到 cangku目录下 创建远程仓库容器 mkdir  mycangk ...

  3. C# winform压缩文件夹带进度条

    注意:用了开源的CL.IO.Zip库 pbYSJD是进度条的控件名 btnImport是按钮控件名,当压缩结束之后,使按钮处于激活状态,否则无法点击按钮. /// <summary> // ...

  4. Qt之布局管理器

    简述 Qt的布局系统提供了一个简单的和强有力的方式,来自动排列窗口子控件布局. 所有QWidget子类可以使用布局来管理他们的子控件.QWidget::setLayout()函数可以为一个控件布局.当 ...

  5. poj 2337 Catenyms 【欧拉路径】

    题目链接:http://poj.org/problem?id=2337 题意:给定一些单词,假设一个单词的尾字母与还有一个的首字母同样则能够连接.问能否够每一个单词用一次,将全部单词连接,能够则输出字 ...

  6. NPOI操作Excel 004：写入空Excel(添加保存提示框)

    前文说道写入excel的样例,当中保存Excle后须要添加提示框.让用户自己选择保存路径,做改动例如以下. 引用的dll等前面已经说过了, 直接看代码: protected void Btn_Writ ...

  7. gem5中event queue执行原理机制具体分析

    搞清楚这个花了两天时间,下面内容为简略版.为了给自己赚点下载用的积分.如须要具体版本号.请点击下载点击打开链接 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  8. Effective C++ 条款12

    复制对象时,勿忘其每个成分 作者在本节条款提醒我们,在多重继承的情况下进行copy或者copy assignment 的operator=的编写时,一定要考虑base 类部分数据的初始化后者复制. 对 ...

  9. 【通信框架】Google的开源通信框架protobuf概述

    在阅读的过程中有不论什么问题,欢迎一起交流 邮箱:1494713801@qq.com    QQ:1494713801 一.作用 protobuf(Protocol Buffers)是Google内部 ...

  10. mac鼠标滚动方向自然问题

    mac使用鼠标的时候滚轮方向和Windows是相反的.假设不勾选滚动方向自然,那么触摸板使用不爽. 解决的方法: 1.打开http://pilotmoon.com/scrollreverser/,下载 ...