<!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. node.js应用--转载

    最近,在向大学生们介绍 HTML5 的时候,我想要对他们进行问卷调查,并向他们显示实时更新的投票结果.鉴于此目的,我决定快速构建一个用于此目的的问卷调查应用程序.我想要一个简单的架构,不需要太多不同的 ...

  2. 如何让thinkpad X1C 用U盘 安装上专业版win10

    1 BIOS内置了文件 会导致win10 iso默认装家庭版 2 给iso 的resouse 目录中增加文件ei.cfg 3 内容如下 [EditionID]Professional[Channel] ...

  3. java DTO 转 POJO

    如果这两个类的要转化的属性其属性名不一样的话,那只能用get和set方法赋值 如果你的两个类要转化的属性名都一样,那可以用org.springframework.beans.BeanUtils这个类来 ...

  4. Python的实现分类

    目前流行的Python实现包括CPython,Jython,IronPython,Stackless,PyPy,Cython,Shed Skin. CPython Cpython是Python的标准实 ...

  5. 接口文档管理工具-Postman、Swagger、RAP（转载）

    接口文档管理工具-Postman.Swagger.RAP 转自:http://www.51testing.com/html/10/n-3715910.html 在项目开发测试中,接口文档是贯穿始终的. ...

  6. SOA是什么为什么要面向服务编程

    SOA(面向服务的架构),Service-Oriented Architecture,面向服务的体系结构. 也就是以服务为核心的架构.这里需要理解什么是服务. 比如你有一个读取通知的方法: publi ...

  7. TCP系列03—连接管理—2、TCP连接的同时打开和同时关闭

    在前面的内容中我们介绍了TCP连接管理中最常见的三次握手方式和四次挥手的方式.但是有可能A和B两端同时执行主动打开并连接对方或者同时执行主动关闭连接(尽管发生这种情况的可能性比较低低),这个时候的流程 ...

  8. HDU 1995 R-汉诺塔V

    https://vjudge.net/contest/67836#problem/R 用1,2,...,n表示n个盘子,称为1号盘,2号盘,....号数大盘子就大.经典的汉诺塔问 题经常作为一个递归的 ...

  9. shell练习题讲解

    写一个脚本,计算100以内所有的奇数的和以及所有偶数的和,分别显示出来#! /bin/bashsum1=0for i in `seq 1 2 100`do sum1=$[$sum1+$i]doneec ...

  10. java 基础 --int 和Integer的区别

    感到脸红:int是整形 -128~127 Integer是正整型,你怎么会想到这样的回答,妈的,有脑子吗?!!! 1,int是基本数据类型,初始为0,Integer为封装类,初始为null ①无论如何 ...