<!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. SGU 438 The Glorious Karlutka River =)(最大流)

    Description A group of Mtourists are walking along the Karlutka river. They want to cross the river, ...

  2. v-if或者v-repeat等不起作用

    v-if或者v-for等不起作用 在项目中,有时遇到了v-if或v-for等形式时,页面没起作用.以下可能是出现这些问题的原因: 1.绑定值是接口返回的某个属性值,而这个属性值不存在data()中,这 ...

  3. Sublime Text 插件之:MarkDown

    Sublime Text 插件之:MarkDown 喜欢写文档的同学应该离不开 MarkDown ,ST(Sublime Text)的插件 Markdown Preview 就支持实时在浏览器中预览p ...

  4. Rightmost Digit(最后一位数字)

    Description Given a positive integer N, you should output the most right digit of N^N.    Input The ...

  5. 关于命令行参数argv(《学习OpenCV》)

    在<学习OpenCV>这本书中,很多示例代码都用到了命令行参数.作为新手,之前总是很困扰,不知道怎么用.偶然的机会终于略知一二了. 在Visual Studio中,我们可以自行设置命令行参 ...

  6. Sitemesh小记

    一.前言 因参与公司框架改造,接触到了Sitemesh这个用于网页布局和修饰的框架,因之前没有接触过(汗颜),但是发现其小巧好用,便以此文记之~ 二.正文 Sitemesh有什么作用呢?我相信很多人在 ...

  7. 钉钉 E应用 打开分享外链

    钉钉 E应用 打开分享外链 外部链接 https://open-doc.dingtalk.com/microapp/dev https://open-doc.dingtalk.com/microapp ...

  8. 浅析Docker容器的应用场景

    本文来自网易云社区 作者:娄超 过去几年开源界以openstack为代表的云计算持续火了好久,这两年突然又冒出一个叫Docker的容器技术,其发展之迅猛远超预料.网上介绍Docker容器的文章已经很多 ...

  9. HSF原理

    HSF(High-speed Service Framework),高速服务框架,是阿里系主要采用的服务框架,其目的是作为桥梁联通不同的业务系统,解耦系统之间的实现依赖.其高速体现在底层的非阻塞I/O ...

  10. 第27天:js-表单获取焦点和数组声明遍历

    一.表单 1.this指事件的调用者2.input.value 表单更换内容3.innerHTML更换盒子里的内容,文字.标签都能换.4.isNaN("12")如果里面的不是个数字 ...