zoukankan      html  css  js  c++  java
  • vue-cli 中实现简单动画效果 (vue2.0)

    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{
      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。

  • 相关阅读:
    Android APK反编译具体解释(附图)
    PHP操作数据库PDO
    ios save image to album
    HTTP协议中返回代码302的情况
    ORACLE 创建表空间、用户、授权
    Nginx并发訪问优化
    天将降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,增益其所不能
    TIMESTEN安装配置指南-中文版
    网络直播电视之M3U8解析篇 (下)
    Android Popupwindow 拖动
  • 原文地址:https://www.cnblogs.com/pearl07/p/6272421.html
Copyright © 2011-2022 走看看