<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. 4.10 Routing -- Asynchronous Routing

    本节介绍了路由器的一些更高级的功能和处理复杂异步逻辑的能力. 一.A word on promises 1. 在Ember的Router中Ember使用了大量的Promises概念来处理异步逻辑.简而 ...

  2. cocos代码研究（19）Widget子类ImageView学习笔记

    理论基础 显示图片的小控件,继承自 Widget . 代码实践 static ImageView * create()创建一个空的ImageView static ImageView * create ...

  3. 如何使用代码备份SQL Server数据库

    1.添加引用 using Microsoft.SqlServer.Management.Smo; using Microsoft.SqlServer.Management.Common; 2. Bac ...

  4. http之状态码含义

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3xx:重定向--要完成请求必须进行 ...

  5. 2018-2019 ICPC, NEERC, Northern Eurasia Finals (Unrated, Online Mirror, ICPC Rules, Teams Preferred) Solution

    A. Alice the Fan Solved. 题意: 两个人打网球,要求teamA 的得分与其他队伍拉开尽量大 输出合法的方案 思路: $dp[i][j][k][l] 表示 A 赢i局,其他队伍赢 ...

  6. hdu5073 贪心

    这题说的是给了 n个值每个值 然后 他们的品均值 作为中点 然后每个点到中点的均值的平方 和最小值是多少 有 k 个点可以重新 放过位置 , 这样我们 应该 会选 最近的那个 n-k个点 然后 取他们 ...

  7. 【图像处理】计算Haar特征个数

    http://blog.csdn.net/xiaowei_cqu/article/details/8216109 Haar特征/矩形特征 Haar特征本身并不复杂,就是用图中黑色矩形所有像素值的和减去 ...

  8. 隐藏Apche、Nginx、PHP的版本号提高网站安全性

    隐藏Apache版本号 在apache配置文件httpd.conf中,加入以下代码 ServerTokens Prod ServerSignature Off 隐藏Nginx版本号 在nginx的配置 ...

  9. windows 10占用cpu和内存过高

    自从安装了windows 10,开机之后cpu和内存一直占用很高,尤其是system进程,一直占cpu在13%左右,上网查到一个解决方式,如下: cpu瞬间变为1%

  10. 2018-2019-1 20189215《Linux内核原理与分析》第五周作业

    <庖丁解牛>第四章书本知识总结 系统调用的三层机制 API(应用程序编程接口) 中断向量(系统调用处理入口) 服务程序(系统调用内核处理系统) 计算机的硬件资源是有限的,为了减少有限资源的 ...