<!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. hadoop问题集(1)

        参考: http://dataunion.org/22887.html 1.mapreduce_shuffle does not exist 执行任何时报错: Container launch ...

  2. 2019寒假训练营寒假作业（三） MOOC的网络空间安全概论笔记部分

    目录 第五章 网络攻防技术 5.1:网络信息收集技术--网络踩点 信息收集的必要性及内容 网络信息收集技术 网络踩点(Footprinting) 网络踩点常用手段 5.2:网络信息收集技术 --网络扫 ...

  3. 第二次作业 编程题 PAT 1001A+B Format

    Github的object-oriented仓库:1001.A+BFormat(20) 1.解题的思路过程 在之前学习C语言时曾经碰到过类似的将数字转换成字符输出的情况,这道题目要求输出的数字每三个间 ...

  4. Python 元组 集合

    1. 元组 >>> a = (1,2,3,4,5) >>> b = list(a) #转换成列表对象, 可以更改 >>> b [1, 2, 3, ...

  5. DELPHI的MEMO组件

    位于Standard选项卡上,它是对EDIT控件的扩展,可以对多行文本进行显示.输入 和编辑. Lines属性: 该属性实际上为TStrings类型的对象,用来存放Memo对象的文本 TStrings ...

  6. bzoj4031-小Z的房间

    题目 给一个\(n\*m\)的矩阵,每个点可能为"."或"*",有多少种方法把矩阵中的点全部连接起来,并且每两个点之间只有一条路径. 分析 题目所求的是一个矩阵 ...

  7. 【bzoj3297】[USACO2011 Open]forgot STL+dp

    题目描述 发生了这么多,贝茜已经忘记了她cowtube密码.然而,她记得一些有用的信息. 首先,她记得她的密码(记为变量P)长度为L(1 <= L<=1,000)字符串,并可以被分成 一个 ...

  8. 【bzoj1775】[Usaco2009 Dec]Vidgame 电视游戏问题 dp

    题目描述 输入 * 第1行: 两个由空格隔开的整数: N和V * 第2到第N+1行: 第i+1行表示第i种游戏平台的价格和可以在这种游戏平台上面运行的游 戏.包含: P_i, G_i还有G_i对由空格 ...

  9. BZOJ3435 & 洛谷3920 & UOJ55：[WC2014]紫荆花之恋

    https://www.lydsy.com/JudgeOnline/problem.php?id=3435 https://www.luogu.org/problemnew/show/P3920 ht ...

  10. BZOJ4071 & 洛谷3644 & UOJ112：[APIO2015]巴邻旁之桥——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4071 https://www.luogu.org/problemnew/show/P3644 ht ...