vue2 过渡动画
<body>
<div id="app">
<transition name="move"> // transition里面的 div是我们要执行的动画
<div class="car" @click="car" transition="move" v-show="number>0">-</div>
</transition>
<div class="num">{{number}}</div>
<div class="add" @click="add">+</div> </div> <style> div div{
width:20px;
height:20px;
display:inline-block;
text-align:center;
vertical-align:top;
position:relative;
border-radius:%;
background:rgba(,,,0.4);
color:#fff;
}
.car{
transform:translateX() rotate(0deg); }
.move-enter-active, .move-leave-active{
transition:all .5s; //动画持续的时间
}
.move-leave-active, .move-enter{
transform:translateX(180px) rotate(180deg);
// 我理解为 我们开始的时候是 rotate180deg => .car的 rotate(0deg) 过渡 180deg => 0deg // 当我们的number不满足0的时候，我们 当前是 0 然后往 180过渡，然后隐藏 0deg =>180deg }
</style>
<script> new Vue({
el:"#app",
data:{
number:
}, computed:{ },
methods:{
car:function(){
if(this.number > ){
this.number--;
}
},
add:function(){
this.number++;
}
} }) </script>
vue2 过渡动画的更多相关文章
- vue2.0 之 过渡动画transtion
过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...
- transtion:过渡动画
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...
- 用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...
- CSS基础篇之背景、过渡动画
background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...
- 基于ReactCSSTransitionGroup实现react-router过渡动画
此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...
- CSS3初学篇章_5（背景样式/列表样式/过渡动画）
背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...
- Windows Store App 过渡动画
Windows Store App 过渡动画 在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...
- 用 Swift 制作一个漂亮的汉堡按钮过渡动画
汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它. 这是 CreativeDash team 的原型图: 你可能已经注意到了,汉堡顶 ...
- Css中的变形及过渡动画
在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...
随机推荐
- CVP沙龙
关于职场: 35岁之后,还去招聘网站投简历? 35岁可能是个分水岭 95后比一些80后还强, 有些80后玻璃心 35岁有的可能已经是VP了 应该深入积累而不是蜻蜓点水 只有第一年成长了,之后是重复劳动 ...
- Popular Cows---poj2186（缩点，强联通）
题目链接:http://poj.org/problem?id=2186 求有多少个点满足其他n-1个点都能到达这个点,是单向图: 所以我们可以把图进行缩点,之后求出度为0的那个点内包含的点的个数就是求 ...
- AndroidManifest.xml的targetSdkVersion 与 project.properties中target
(1)minSdkVersion与maxSdkVersion :在安装程序的时候,如果目标设备的API < minSdkVersion,或者目标设备的API > maxSdkVersion ...
- 格式工厂将图片变小，有500kb变为16kb
1:打开格式工厂,选择图片栏>jpg 2:点击添加文件,选择要处理 的图片.点击输出配置,配置转换后 的大小(可手动调整),越小占用空间越少,点击确定 3: 主页面点击转换按钮,转换成功后,显示 ...
- hadoop中map和reduce的数量设置
hadoop中map和reduce的数量设置,有以下几种方式来设置 一.mapred-default.xml 这个文件包含主要的你的站点定制的Hadoop.尽管文件名以mapred开头,通过它可以控制 ...
- 三、Mosquitto Java 客户端实现
本文的实现是在 << 一.Mosquitto 介绍&安装>> << 二. Mosquitto 的使用说明 >> 两篇文章搭建好 Mosquitt ...
- 整数（质因子）分解（Pollard rho大整数分解）
整数分解,又称质因子分解.在数学中,整数分解问题是指:给出一个正整数,将其写成几个素数的乘积的形式. (每个合数都可以写成几个质数相乘的形式,这几个质数就都叫做这个合数的质因数.) .试除法(适用于范 ...
- 非线性方程(组)：一维非线性方程（二）插值迭代方法 [MATLAB]
一般而言,方程没有能够普遍求解的silver bullet,但是有几类方程的求解方法已经非常清晰确凿了,比如线性方程.二次方程或一次分式.一次方程可以直接通过四则运算反解出答案,二次方程的求根公式也给 ...
- 005-matlab2018a安装破解
1.下载地址: 百度云下载链接:https://pan.baidu.com/s/1uTYAxVX1_Hx6nbsgf4W4kA 密码:asrw 官网下载地址: 2.解压. 3.双击setup.exe后 ...
- 70. Climbing Stairs（动态规划 爬台阶，一次只能爬1,2两节）
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...