<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 过渡动画的更多相关文章

  1. vue2.0 之 过渡动画transtion

    过渡的类名: 在进入/离开的过渡中,会有 6 个 class 切换 (v 是前缀,name = v) v-enter:定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. v-enter-ac ...

  2. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  3. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  4. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  5. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  6. CSS3初学篇章_5（背景样式/列表样式/过渡动画）

    背景样式 1.背景颜色语法:background-color : transparent | color body { background-color:#CCCCCC;} 2.渐变色彩语法:back ...

  7. Windows Store App 过渡动画

    Windows Store App 过渡动画     在开发Windows应用商店应用程序时,如果希望界面元素进入或者离开屏幕时显得自然和流畅,可以为其添加过渡动画.过渡动画能够及时地提示用户屏幕所发 ...

  8. 用 Swift 制作一个漂亮的汉堡按钮过渡动画

    汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它.   这是 CreativeDash team 的原型图: 你可能已经注意到了,汉堡顶 ...

  9. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

随机推荐

  1. 验证ip地址

    package site.wangxin520.test; import sun.net.util.IPAddressUtil; public class Test { public static v ...

  2. Excel 26机制转换

    [问题描述] 在Excel中,列的名称是这样一个递增序列:A.B.C.….Z.AA.AB.AC.….AZ.BA.BB.BC.….BZ.CA.….ZZ.AAA.AAB….我们需要将上述列名序列和以下自然 ...

  3. 【Maven学习】Nexus OSS私服仓库的备份与迁移

    背景 在上一篇博客 [Maven学习]Nexus OSS私服仓库的安装和配置 中,我们已经在机房搭建好了新的Nexus OSS私服仓库.下面是两个版本的Nexus OSS私服仓库的对比图. 老的Nex ...

  4. sql server 碎片整理——DBCC SHOWCONTIG

    转自: 1.http://blog.sina.com.cn/s/blog_6d2675450101ks6i.html 2.http://www.cnblogs.com/CareySon/archive ...

  5. iptables 执行清除命令 iptables -F 要非常小心的

    iptables 执行清除命令 iptables -F 要非常小心的 http://blog.csdn.net/netingcn/article/details/5692972 使用 /sbin/ip ...

  6. [转]AJAX 跨源 HTTP 请求

    转自OSChina, 原文: http://www.oschina.net/translate/ajax-cross-origin-http-request 背景 跨源HTTP请求(也称跨域AJAX请 ...

  7. （转） bicabo Visual Studio 2012自动添加注释（如版权信息等）

    如何使用Visual Studio 2012给程序文件的头部自动添加如下的注释? /********************************************************** ...

  8. F题:等差区间(RMQ||线段树)

    原题大意:原题链接  题解链接 给定一个长为n的数组元素和q次区间[l,r]询问,判断区间[l,r]内元素排序后能否构成等差数列 #include<cmath> #include<c ...

  9. Dom 重绘重排

    https://juejin.im/entry/590801780ce46300617c89b8   DOM 重绘重排

  10. 从知乎了解到，为什么Mysql禁用存储过程、外键和级联？

    打开帖子直接一张醒目的图,是阿里巴巴的Java开发手册对Mysql相关的要求. 看看下面的回复 灵剑 存储过程没有版本控制,版本迭代的时候要更新很麻烦.存储过程如果和外部程序结合起来用,更新的时候很难 ...