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>+ 其中对 ...
随机推荐
- 用 chown 和 chmod 修改目录所属用户及权限
1.修改 tmp 目录所属用户为 root,用户组为 root chown -R root:root /tmp12.修改 tmp 目录为可写权限 chmod -R 777 /tmp
- render的几个应用
1.render可以通过模版语法来渲染字符串,例如变量,标签,for循环,这里就不赘述,我就举个自己印象很深刻灵活应用,看看render到底做了什么,关心什么 注意! 在rander眼里,没有html ...
- 重定向、feed输出：控制台输出的内容存放到文件
重定向.feed输出:控制台输出的内容存放到文件 1.重定向 os.system('wget -r -p -np -k http://www.baidu.com/ -o wget.log' ) 2.f ...
- 前端 html span标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python模块之pyMySql
目录: 安装 使用 一.安装 本模块为python第三方模块,需要单独安装.作用为调用mysql接口执行模块 pip3 install pyMySql 二.使用 1.执行SQL #!/usr/bin/ ...
- （转）Terraform，自动化配置与编排必备利器
本文来自作者 QingCloud实践课堂 在 GitChat 上分享 「Terraform,自动化配置与编排必备利器」 Terraform - Infrastructure as Code 什么是 T ...
- 小论“Boolean参数作为入参”的函数
<Clean Code>一书中对于如何写好函数有着很动人的描写,其中对于函数参数的建议有如下两点: 函数参数的数量应该尽可能少 给一个一元函数传入bool类型的参数很"罪恶&qu ...
- Linux系统——FTP
FTP连接及传输模式1. 控制连接:TCP21,用于发送FTP命令信息2. 数据连接:TCP20,用于上传.下载数据3. 数据连接的建立类型:(1)主动模式:服务器制动发起数据连接首先由客户端向服务端 ...
- OAuth 白话简明教程 4.刷新 Access Token
转自:http://www.cftea.com/c/2016/11/6705.asp OAuth 白话简明教程 1.简述 OAuth 白话简明教程 2.授权码模式(Authorization Code ...
- FTRL与Online Optimization
1. 背景介绍 最优化求解问题可能是我们在工作中遇到的最多的一类问题了:从已有的数据中提炼出最适合的模型参数,从而对未知的数据进行预测.当我们面对高维高数据量的场景时,常见的批量处理的方式已经显得力不 ...