<!-- 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. FZU 1980 AbOr's story

    AbOr's story Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original I ...

  2. OpenStack-API开发

    介绍两种OpenStack-API(Java版)--jcoulds && openstack4j Jclouds 1.介绍 jclouds -该API提供云计算环境的可移植抽象层以及云 ...

  3. DataTable 数据导入MS ACCESS 数据库中 数字类型字段为空的解决办法

    string strSql = "insert into GongCheng (GCSY,GCBH,GCBHOLD,GCMC,GCKCJD,GCJSDW,GCSJDW,GCKCDW,GCSG ...

  4. TODOList 多线程交互、RCP、事物控制、数据倾斜、HBase数据同步性

    TODOList 多线程交互.RCP.事物控制.数据倾斜.HBase数据同步性 TODO List thread.join()如何互相之间通知? 线程池何时最后运行完成? MemCache性能要优于R ...

  5. 【Android进阶篇】Fragment的两种载入方式

    一.概述 Fragment(碎片,片段)是在Android 3.0后才引入的,基本的目的是为了实如今大屏幕设备上的更加动态更加灵活的UI设计. 这是由于平板电脑的屏幕比手机大得多,所以屏幕上能够放很多 ...

  6. tomcat怎样禁止显示文件夹和文件列表

    查看原文:http://www.ibloger.net/article/300.html Tomcat禁止显示文件夹和文件列表 打开   tomcat的安装文件夹/conf/web.xml 文件 &l ...

  7. linux 下同步异步，堵塞非堵塞的一些想法

    补充: 发现一个更好的解释样例:同步是一件事我们从头到尾尾随着完毕.异步是别人完毕我们仅仅看结果. 堵塞是完毕一件事的过程中可能会遇到一些情况让我们等待(挂起).非堵塞就是发生这些情况时我们跨过. 比 ...

  8. 去除ListView 上下边界蓝色或黄色阴影

    默认的情况下,在 ListView 滑动到顶部或者是底部的时候,会有黄色或者蓝色的阴影出现.在不同的版本号上解决办法是不同的,在 2.3 版本号之前能够在 ListView 的属性中通过设置 andr ...

  9. Android BlueDroid（二）：BlueDroid蓝牙开启过程init

    关键词:bluedroid  initNative enableNative BTIF_TASK  BTU_TASKbt_hc_work_thread set_power  preload  GKI作 ...

  10. Linux 文件描写叙述符设置为非堵塞的方法

    通过fcntl设置文件描写叙述符属性 fcntl即F_SETFL,F_GETFL的使用,设置文件的flags,堵塞设置成非堵塞,非堵塞设置成堵塞(这连个在server开发中能够封装为基本函数) 1.获 ...