1,写一个简单的headcomp组件如下:

<template>
  <div class="box">
    <transition name="move">
      <button @click = "decrease" v-show="home.count>0" class="decrease">我是减法</button>
    </transition>
    <div class="num" > {{home.count}} </div>
    <button @click = "add" >我是加法</button><br><br>
  </div>
</template>

<script>
  export default{
  // 使用props接收传过来的数据
  props:{
    home:{
      type:Object,
    }
  },

  methods:{
    decrease:function(){
      if(!this.home.count){
        this.home.count = 1;
      }else{
        this.home.count--;
      }

  },

    add:function(){
      if(!this.home.count){
        this.home.count = 1;
      }else{
        this.home.count++;
      }
    }
  }

}
</script>

<style>
  div>button,.num{
  display: inline-block;
}
div>button{
  border:none;
  background:#41b883;
  color:#fff;
  padding:5px 20px;
  margin:0 20px;
}
.box{
  width:400px;
  position: relative;
}
.decrease{
  position: absolute;
  left:30px;
  transition:all 0.3s linear;
}
.add{
  position: absolute;
  right:0;
}

//以下的类,是执行动画时产生的,可以根据动画执行开始/结束,设置不同状态时候的样式
.move-transition{
  opacity: 1;
  transform: translate3d(0,0,0);
}

.move-enter-active,.move-leave-active{
  opacity: 0;
  transform: translate3d(5px,0,0);
}

</style>

2,图示

3,效果:当count>0 : 向左移动,透明度从0-1;当count<0 : 向右移动,透明度从1-0。

vue-cli 中实现简单动画效果 (vue2.0)的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  3. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  4. 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)

    总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■   CLI是Command-Lin ...

  5. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  6. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  7. css3中outline切换动画效果

    今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...

  8. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  9. ListView中内容的动画效果

    LayoutAnimationController用于为一个layout里面的控件,或者是一个ViewGroup里面的控件设置动画效果,可以在XML文件中设置,亦可以在Java代码中设置. 一种直接在 ...

随机推荐

  1. 深度学习文档 DeepLearning 0.1 documentation

    Contents LICENSE Deep Learning Tutorials Getting Started Download Datasets Notation A Primer on Supe ...

  2. python的单元测试框架

    1.unittest是Python内置的标准类库.它的API跟Java的JUnit..net的NUnit,C++的CppUnit很相似.   通过继承unittest.TestCase来创建一个测试用 ...

  3. [gevent源代码分析] 深度分析gevent执行流程

    一直对gevent执行流程比較模糊,近期看源代码略有所得.不敢独享.故分享之. gevent是一个高性能网络库,底层是libevent,1.0版本号之后是libev.核心是greenlet.geven ...

  4. 关于vs2013调试的偶然错误发现与总结(vs2013的承载进程)---ShinePans

    当项目的属性选择为 启用 vs2013承载进程 或出现一下错误: 尝试运行项目时出错:未能加载文件或程序集"GroupBoxTest" 或它的某一个依赖项.给定程序集名称" ...

  5. C#模拟MSN窗体抖动

    C#模拟MSN窗体抖动 窗体抖动是件很有意思的事情,就让我们看看一起来看看它的原理吧. 其实是生成随机数,然后改变Form的左上角的坐标.我用的是循环来弄得,其实可以用timer来控制. 我把抖动分成 ...

  6. 设置tomcat配置文件,在Myeclipse中修改jsp文件之后不用重启tomcat

    在Myeclipse中创建的Web程序在修改类或者jsp页面后需要重动ttomcat的,要重新加载一次的,即重新启动tomcat一次.重启时比较慢,及浪费资源及时间, 设置tomcat配置文件,在My ...

  7. UVA11402 - Ahoy, Pirates!(线段树)

    UVA11402 - Ahoy, Pirates!(线段树) option=com_onlinejudge&Itemid=8&category=24&page=show_pro ...

  8. IIS7 大文件上传 asp.net iis配置

    IS6下上传大文件没有问题,但是迁移到IIS7下面,上传大文件时,出现HTTP 404错误. IIS配置上传大小,webconfig <!-- 配置允许上传大小 --><httpRu ...

  9. function(window, undefined)的意义

    var num = 10000 for (var i = 0; i++; i < num) { eval("pp" + i + "=" + i); } ( ...

  10. tarjan+缩点+强连通定理

    C - Network of Schools Time Limit:1000MS     Memory Limit:10000KB     64bit IO Format:%I64d & %I ...