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>+ 其中对 ...
随机推荐
- sklearn学习笔记（一）——数据预处理 sklearn.preprocessing
https://blog.csdn.net/zhangyang10d/article/details/53418227 数据预处理 sklearn.preprocessing 标准化 (Standar ...
- SpringCloud 进阶之Zuul(路由网关)
1. Zuul(路由网关) Zuul 包含了对请求的路由和过滤两个最主要的功能; 路由功能:负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础; 过滤功能:负责对请求的处理过程进行干 ...
- linux 下创建虚拟环境 python
virtualenv是一个可以在同一计算机中隔离多个python版本的工具.有时,两个不同的项目可能需要不同版本的python,如 python2.7 / python3.6 ,但是如果都装到一起,经 ...
- XShell已经内置rz 直接从Windows拖文件进去终端
XShell已经内置rz 直接从Windows拖文件进去终端 http://www.jb51.net/LINUXjishu/163820.html 借助securtCRT,使用linux命令sz可以很 ...
- orcle中如何使用动态游标来对变量进行赋值
在oracle中动态游标的概念一般不常用,但有时根据客户的特殊业务,需要使用到动态游标来解决问题!在对于一条动态SQL语句而产生多条记录时,动态游标的使用将是一个很好的选择,具体参见如下在工作流项目中 ...
- poi根据模板导出word文档
POI结构与常用类 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人员则可以利用NPOI ...
- Executor框架与Thread
Executor将线程的创建和线程的执行解耦,比较下面两个例子: 1:TaskExecutionWebServer.java package chapter06; import java.io.IOE ...
- Xcel 测试版使用手册
基于无任何文笔可言,所以直接上使用方法吧. 1.引用dll,如何引用dll请谷歌. 2.使用 //实例化对象 LT.XMLExcel.XlsxOption xOption = new LT.XMLEx ...
- mysql索引之聚簇索引与非聚簇索引
1 数据结构及算法基础 1.1 索引的本质 官方定义:索引(Index)是帮助MySQL高效获取数据的数据结构 本质:索引是数据结构 查询是数据库的最主要功能之一.我们都希望查询速度能尽可能快,因此数 ...
- VS2010/MFC编程入门之九（对话框：为控件添加消息处理函数）
创建对话框类和添加控件变量在上一讲中已经讲过,这一讲的主要内容是如何为控件添加消息处理函数. MFC为对话框和控件等定义了诸多消息,我们对它们操作时会触发消息,这些消息最终由消息处理函数处理.比如我们 ...