<!-- 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. Axios 使用时遇到的问题

    最近使用 vue 构建一个小项目,在使用 axios 发送 post 请求的时候,发现 axios 发送数据默认使用 json 格式,百度搜了下,更改 ContentType 不管用,最终问题原来是: ...

  2. hook中ref使用

    hook使用ref 父组件: 引入                  useRef 声明ref的名字     const dateRef = useRef() 复值给组件         ref={d ...

  3. WinCE的C#中使用StreamReader 来读取TXT文档，读取文本文档。

    using System.IO; private void button1_Click(object sender, EventArgs e) { string strFilePath = " ...

  4. C#获取本机内网外网IP

    using System.Net; # region 获取内.外网Ip /// <summary> /// 获取本地ip地址,优先取内网ip /// </summary> pu ...

  5. 《从零開始学Swift》学习笔记（Day 51）——扩展构造函数

    创文章.欢迎转载.转载请注明:关东升的博客 扩展类型的时候,也能够加入新的构造函数.值类型与引用类型扩展有所差别.值类型包含了除类以外的其它类型.主要是枚举类型和结构体类型. 值类型扩展构造函数 扩展 ...

  6. 【试水CAS-4.0.3】第02节_CAS服务端登录页个性化

    完整版见https://jadyer.github.io/2015/07/16/sso-cas-login-diy/ /** * @see ------------------------------ ...

  7. php使用flock堵塞写入文件和非堵塞写入文件

    php使用flock堵塞写入文件和非堵塞写入文件 堵塞写入代码:(全部程序会等待上次程序运行结束才会运行,30秒会超时) <?php $file = fopen("test.txt&q ...

  8. Linux 命令行光标快速选中移动快捷键

    Ctrl+Alt+T 打开终端一些常用的终端快捷键:Ctrl+L 清空屏幕(功能相当于命令clear)Ctrl+U 剪切文本直到行的起始(可以用于清空行)Ctrl+K 剪切文本直到行的末尾Ctrl+Y ...

  9. 2.LINUX常用命令

    Linux 必备指令摘要一般用户指令/bin 指令 功能说明 范例 bash GNU Bouren-Again Shell bash shell_script cat 观看一般文本文件 cat fil ...

  10. MyBatis+mysql查询和添加数据

    项目结构: Menu package com.mstf.dao; import java.util.Scanner; import org.apache.ibatis.session.SqlSessi ...