<!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. ARM架构中的程序执行与调用

    ARM架构中的程序执行与调用 1. 几个名词 ABI : 可执行文件必须遵守的规范,以在特定执行环境中运行: 单独产生的可重定址的文件必须遵守的规范,以用来链接和执行. EABI: 适用于嵌入式环境的 ...

  2. openstack多region介绍与实践---转

    概念介绍 所谓openstack多region,就是多套openstack共享一个keystone和horizon.每个区域一套openstack环境,可以分布在不同的地理位置,只要网络可达就行.个人 ...

  3. Linux 150命令之 文件和目录操作命令 cd pwd cp mv touch

    cd 切换目录 cd 目录 [root@mysql ~]# cd / [root@mysql /]# ls application bin class dev home lib64 media nfs ...

  4. 编译安装hadoop2.6.3

    一.安装环境 1.1  JAVA  安装java1.7 下载jdk1.7: [root@node1~]# wget http://download.oracle.com/otn-pub/java/jd ...

  5. 《安装ubuntu及VMware以及相关问题汇总》

    一.VMware Ubuntu安装详细过程 http://blog.csdn.net/u013142781/article/details/50529030 二.VMware Tools (ubunt ...

  6. 20172330 2017-2018-1 《Java程序设计》第四周学习总结

    20172330 2017-2018-1 <Java程序设计>第四周学习总结 教材学习内容总结 这一周的内容还是比较多的,而且很复杂,包含第四和第七章. 第四章向我们介绍了类结构的定义与概 ...

  7. LintCode-71.二叉树的锯齿形层次遍历

    二叉树的锯齿形层次遍历 给出一棵二叉树,返回其节点值的锯齿形层次遍历(先从左往右,下一层再从右往左,层与层之间交替进行) 样例 给出一棵二叉树 {3,9,20,#,#,15,7}, 返回其锯齿形的层次 ...

  8. UVA 167 R-The Sultan's Successors

    https://vjudge.net/contest/68264#problem/R The Sultan of Nubia has no children, so she has decided t ...

  9. 关于FEer发展方向的思考

    今天学习了HTTP权威指南这本书,虽然标题是对FEer发展的思考,不过我打算稍后再说这个议题,先对今天学习的内容做个总结. 首先:原来访问服务器的方式有多重,核心是URI,也就是统一资源定位,按照访问 ...

  10. 【Docker 命令】- kill命令

    docker kill :杀掉一个运行中的容器. 语法 docker kill [OPTIONS] CONTAINER [CONTAINER...] OPTIONS说明: -s :向容器发送一个信号 ...