<!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. leetcode个人题解——#24 Swap Nodes in Pairs

    因为不太熟悉链表操作,所以解决方法烦了点,空间时间多有冗余. 代码中l,r分别是每一组的需要交换的左右指针,temp是下一组的头指针,用于交换后链接:res是交换后的l指针,用于本组交换后尾指针在下一 ...

  2. spring boot 中文乱码问题

    在刚接触spring boot 2.0的时候,遇到了一些中文乱码的问题,网上找了一些解决方法. 这里自己做个汇总. 在application.properties文件中添加: spring.http. ...

  3. C语言 命令行参数 函数指针 gdb调试

    . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/21551397 | http://www.hanshul ...

  4. ACM 第十九天

    积性函数 积性函数线性筛,筛素数,u(n),欧拉函数: vis[]=vis[]=,mu[]=,phi[]=; ;i<=N;++i){ ,phi[i]=i-,prime[++cnt]=i; ,k= ...

  5. 创建、编译、执行 java程序

    java源文件(.java)——Java字节码文件(.class)——在java虚拟机上执行 其他语言很多是编译后执行,所以无法跨平台

  6. 使用协程（gevent)实现请求

    协程,又称微线程.英文名Coroutine. 协程最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线程数量越多,协程的性能优势就 ...

  7. ZOJ 1539 L-Lot

    https://vjudge.net/contest/67836#problem/L Out of N soldiers, standing in one line, it is required t ...

  8. [OS] 操作系统常考知识点

    转自:http://jennica.space/2017/03/21/os-principle/ 大纲如下: 1.操作系统概述2.操作系统运行环境3.进程线程模型4.处理器调度5.同步机制6.存储模型 ...

  9. 【Python】Python中*args 和**kwargs的用法

    好久没有学习Python了,应为工作的需要,再次拾起python,唤起记忆. 当函数的参数不确定时,可以使用*args 和**kwargs,*args 没有key值,**kwargs有key值. 还是 ...

  10. 只要访问的地址匹配cookie的地址时候 发送request请求时候 会携带上该cookie

    只要访问的地址匹配cookie的地址时候 发送request请求时候 会携带上该cookie