<!Doctype>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        @keyframes shape-change {

            0%, 100% {

                border-radius: 50%;

                background: red

            }

            50% {

                border-radius: 0;

                background: blue

            }

        }

        @keyframes moveball-in {

            0% {

                transform: translate3d(300px, -200px, 0)

            }

            50% {

                transform: translate3d(100px, -400px, 0)

            }

            100% {

                transform: translate3d(0, 0, 0)

            }

        }

        @keyframes moveball-out {

            0% {

                transform: translate3d(0, 0, 0)

            }

            50% {

                transform: translate3d(100px, -400px, 0)

            }

            100% {

                transform: translate3d(300px, -200px, 0)

            }

        }

        .btn {

            width: 40px;

            height: 30px;

            margin-top: 40px;

            border: none;

            outline: none;

            background: red;

            color: #fff;

        }

        .ball {

            position: absolute;

            bottom: 20px;

            left: 20px;

            width: 50px;

            height: 50px;

            transition: all 1s cubic-bezier(.22, -0.86, .97, .58)

        }

        .ball.move-enter-active {

            opacity: 1;

            animation: moveball-in 1s;

        }

        .ball.move-enter-active .inner {

            animation: shape-change 1s

        }

        .ball.move-leave-active {

            opacity: 0.8;

            animation: moveball-out 1s

        }

        .ball.move-leave-active .inner {

            animation: shape-change 1s

        }

        .inner {

            display: inline-block;

            width: 30px;

            height: 30px;

            border-radius: 50%;

            background: red;

            transition: all 1s linear;

        }

    </style>

</head>

<body>

<div id="app">

    <template>

        <div class="app">

            <button @click="showball" class="btn">show</button>

            <transition name="move" type="animation">

                <div class="ball" v-show="show">

                    <div class="inner"></div>

                </div>

            </transition>

        </div>

    </template>

</div>

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

<script>

    var app = new Vue({

        el: "#app",

        data: {

            show: false

        },

        methods: {

            showball: function () {

                this.show = !this.show;

            }

        }

    });

</script>

</body>

</html>

vue-transition-animation的更多相关文章

  1. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  2. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  3. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  4. A transition animation compatible Library.

    Android5.0之后为我们提供了许多炫酷的界面过渡效果,其中共享元素过渡也是很有亮点的一个效果,但这个效果只能在Android5.0之后使用,那今天我们就来将共享元素过渡效果兼容到Android4 ...

  5. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  6. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  7. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  8. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  9. css3的新特性transform,transition,animation

    一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...

  10. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

随机推荐

  1. Python入门（3）

    一.列表 列表是用来储存和处理多个数据的数据类型,我们可以像下面这样来创建一个列表: my_list = [1, 2, 3] 列表和数学中的集合很像,但是,列表中的数据是可以重复,并且他们是有序的,列 ...

  2. Linux内核设计笔记10——内核同步

    Linux内核同步笔记 几个基本概念 - 临界区(critical region):访问和操作共享数据的代码段: - 原子操作:操作在执行中不被打断,要么不执行,要么执行完: - 竞争条件: 两个线程 ...

  3. 第一课——从main到WinMain

    一.Visual C++6.0 由微软公司推出的基于Windows系统的可视化集成开发环境(IDE) 微软公司为其开发了功能强大的MFC(Microsoft Foundation Class,微软基础 ...

  4. 软件工程课堂作业（三）——Right-BICEP软件单元测试

    一.测试方法:Right-BICEP Right-结果是否正确?B-是否所有的边界条件都是正确的?I-能查一下反向关联吗?C-能用其他手段交叉检查一下结果吗?E-你是否可以强制错误条件发生?P-是否满 ...

  5. Memcache+Cookie解决分布式系统共享登录状态

    Memcached高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.Memcached能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等. Memc ...

  6. lintcode-196-寻找缺失的数

    196-寻找缺失的数 给出一个包含 0 .. N 中 N 个数的序列,找出0 .. N 中没有出现在序列中的那个数. 样例 N = 4 且序列为 [0, 1, 3] 时,缺失的数为2. 挑战 在数组上 ...

  7. lintcode-184-最大数

    184-最大数 给出一组非负整数,重新排列他们的顺序把他们组成一个最大的整数. 注意事项 最后的结果可能很大,所以我们返回一个字符串来代替这个整数. #### 样例 给出 [1, 20, 23, 4, ...

  8. LintCode-374.螺旋矩阵

    螺旋矩阵 给定一个包含 m x n 个要素的矩阵,(m 行, n 列),按照螺旋顺序,返回该矩阵中的所有要素. 样例 给定如下矩阵: [     [ 1, 2, 3 ],     [ 4, 5, 6 ...

  9. C# Dsoframer.ocx 如何在winform中嵌入Excel,内嵌Excel,word

    如果你还不太清楚Dspframer.ocx怎么放到窗体上就看上一篇文章,里面详细介绍了是如何放到窗体上的. 链接:http://www.cnblogs.com/pingming/p/4182045.h ...

  10. centOS 6.5命令方式配置静态IP

    想自己做个centOS玩一下,然后通过FTP访问操作,首先查看是否开启了SSH,命令如下: rpm -qa | grep ssh 这个时候看到的是centOS的ssh已经打开!要是通过FTP工具访问还 ...