<!-- 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. ajax错误信息

    XMLHttpRequest.status状态码 1xx-信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx- ...

  2. 基于 Token 的身份验证：JSON Web Token

    最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强, ...

  3. luogu P2117 小Z的矩阵（结论题）

    题意 题解 这题有点水. 我们发现对答案有贡献的实际上只有左上到右下的对角线上的数. 因为不在这条对角线上的乘积都要计算两遍,然后%2就都没了... 然后就做完了. #include<iostr ...

  4. [HDU5685]2016"百度之星" - 资格赛 Problem A

    题目大意:给你一个字符串,和一些问题,每个问题问你[l,r]子串的哈希值是多少. 哈希值计算方法为:$H(s)=\prod _{i=1} ^{i\leq len(s)}(s_i-28)(mod\ 99 ...

  5. 越努力越幸运--动态数组vector

    最近回忆山哥写的stl,觉得很好用,也写了一份. 感谢群里的大佬帮忙review,还是很多的问题的. code:https://github.com/HellsingAshen/vector_c.gi ...

  6. MD5 加密原理（转）

    MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由MIT Laboratory for Computer Science和RSA Data Secur ...

  7. JAVA学习第二十七课（多线程（六））- 多生产者多消费者问题（JDK1.5新特性）

    多生产者多消费者问题 以生产馒头 消费馒头为例. class Resource { private String name; private int count = 1; private boolea ...

  8. ASMlib操作系统包安装与配置asm disk磁盘

    1.加入6块硬盘,每块100g.不管是热加还是冷加.不管是加硬盘,用san存储划lun,或者再加上多路径,都是能够这么做的. 在操作系统层,能识别这种lun.以下的sdb就是一个刚划分的300g的lu ...

  9. Linux下安装使用MySQL

    网上找那些安装教程比较多的版本,版本只要不是太旧就行. 下载mysql 5.6.28 通用版64位二进制版,二进制版相当于windows的安装包,可以直接安装,如果是源码版,还需要编译后再进行安装. ...

  10. 与 JSON 相关的一些操作 (项目中用到一部分，后续逐渐完善)

    1.JSON 打印 console.log(JSON.stringify(data, null, 4)); 2.JSON 格式判断 var isjson = typeof(obj) == " ...