vue-transition-animation
<!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的更多相关文章
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- Atitti css transition Animation differ区别
Atitti css transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限. 1 1.2. Transition ...
- Atitti css transition Animation differ区别
Atitti css transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限. 1 1.2. js 动态改变 st ...
- A transition animation compatible Library.
Android5.0之后为我们提供了许多炫酷的界面过渡效果,其中共享元素过渡也是很有亮点的一个效果,但这个效果只能在Android5.0之后使用,那今天我们就来将共享元素过渡效果兼容到Android4 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- vue transition
Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...
- css3的新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等.这些的基础都是transform属性 transform属性 ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
随机推荐
- leetcode个人题解——#17 Letter Combinations of a Phone Number
思路:用深搜遍历九宫格字符串,一开始做的时候发生了引用指向空地址的问题,后来发现是vector不能直接=赋值. class Solution { public: int len; ]={"a ...
- 深入理解eos账户体系 active和action
在eos中,账户是一个非常重要的概念. 账户分为两部分组成 一种是active 一种是action. 智能合约本质上来讲就是一个action加上一个回馈脚本程序.任何智能合约都有这俩个部分组成. 那么 ...
- java poi技术读取到数据库
https://www.cnblogs.com/hongten/p/java_poi_excel.html java的poi技术读取Excel数据到MySQL 这篇blog是介绍java中的poi技术 ...
- dice2win
触发交易 转0个 https://etherscan.io/tx/0x784e80167353a886183106cbe3bd15e614cafdb5d6885ccd101177aa0f937a36 ...
- [LeetCode] 53. Maximum Subarray 解题思路
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- 水仙花数---基于python
# coding:utf-8"""水仙花数是指一个 n 位数(n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身(例如:1^3 + 5^3+ 3^3 = 153) ...
- 阿里云搭建bind服务，外网ip不能用来解析问题解决
options { listen-on port 53 { any; }; //端口开放any listen-on-v6 port 53 { ::1; }; directory "/var/ ...
- pthon_flask小汇总
一.Jinja2中的关键字 1.include关键字 用include可以导入另外一个模板到当前模板中 <pre> {% include 'header.html' %} Body {% ...
- 实验吧编程题：Hashkill
原题:6ac66ed89ef9654cf25eb88c21f4ecd0是flag的MD5码,(格式为ctf{XXX_XXXXXXXXXXX_XXXXX})由一个0-1000的数字,下划线,纽约的一个区 ...
- IntelliJ IDEA Maven引入