<!-- 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. centos安装nvidia驱动

    大部分 Linux 发行版都使用开源的显卡驱动 nouveau,对于 nvidia 显卡来说,还是闭源的官方驱动的效果更好.最明显的一点是,在使用 SAC 拾取震相的时候,使用官方显卡驱动在刷新界面的 ...

  2. XML快速注释

    eclipse中编辑java或C/C++,python文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + ...

  3. Flex 远程视频监控观看端新版

    第一个版本号仅仅做了预览这一块 http://blog.csdn.net/songanling/article/details/38306037,后面老板看了认为色调太暗.看得不舒服,然后就開始又一次 ...

  4. 兔子--Android Support v4包丢失的解决的方法

    在开发中,Android Support v4包丢失的解决的方法: Project->properties->Java Build Path->Libraries->Add E ...

  5. 阿里云部署Docker(9)----Dockerfile脚本定制镜像

    本文为原创文章.转载需注明转自:http://blog.csdn.net/minimicall? viewmode=contents 技术爱好者都是比較懒的.而docker又是开发人员支持起来的.所以 ...

  6. android自己定义圆盘时钟

    自己定义圆盘时钟的大概流程:由于圆盘时钟的圆盘是不须要动的,所以不必要加在自己定义的view里面,在view里面仅仅须要绘制秒针和分针时针并控其转动就可以. 下面就是自己定义view的主要代码: pa ...

  7. cocos2d-x 粒子效果

    大规模运动的物体通常有两种方法实现 1.使用帧动画来模拟 2,粒子效果 粒子系统有CCParticleSystem类实现,CCParticleSystem实现了对粒子的控制与调度,对粒子的操作包含: ...

  8. Vim 批量替换

    假设在非Win系统下. 想批量替换文本不再是Ctrl+F那么简单了, 一般用Vim来做批量替换, 略微复杂点: 比如将192.168.0.1替换为192.168.0.2 :%s/192.168.0.1 ...

  9. MySql语句中select可以嵌套么，字段的重命名可以用中文么

    今天文档中看到的查询语句,SELECT后面又跟了一个SELECT嵌套,而且把字段重命名为中文,请问可以这样做么 MySql语句中select可以嵌套么,字段的重命名可以用中文么 >> my ...

  10. 运维派 企业面试题2 创建10个 "十个随机字母_test.html" 文件

    Linux运维必会的实战编程笔试题(19题) 企业面试题2: 使用for循环在/tmp/www目录下通过随机小写10个字母加固定字符串test批量创建10个html文件,名称例如为: --[root@ ...