vue动画学习

1基础-淡入淡出

TIM图片20191111153401.png

<transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>

CSS部分
最基本的用法

.others-enter-active,
  .others-leave-active {
    transition: opacity 1.5s;
  }
  .others-enter,
  .others-leave-to {
    opacity: 0;
  }

可以自定义离开动画。

 .xxx-enter,.xxx-leave-to {
      transform: translateX(18px);
      opacity: 0;
    }

样式上：transition-duration属性

<a v-on:click="show = !show">

    <img :class="{btn:show,btn_copy:!show}" src="/static/bh/btn2.png">

</a>
.btn {

      position: fixed;

      width: 75px;

      left: 10px;

      top: 175px;

      transition-duration: 1.5s;

    }

    .btn_copy {

      position: fixed;

      width: 75px;

      left: -37px;

      top: 175px;

      transition-duration: 1.5s;

    }

动态组件

    <div @click="ChooseA">选A</div>
    <div @click="ChooseB">选B</div>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
data: {
    view: 'v-a'
  },
 components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }

乱序插入乱序移除动画

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },//产生随机数
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },//用splice方法，产生的随机数即是splice的参数，添加一个数，xxx++
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },//移除也是同理
  }

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
{
  opacity: 0;
  transform: translateY(30px);
}

乱序动画列

先安装lodash
在页面引入

import _ from "lodash"

<div id="flip-list-demo" class="demo">
      <button v-on:click="shuffle">Shuffle</button>
      <transition-group name="flip-list" tag="ul">
        <li v-for="item in items" v-bind:key="item">{{ item }}</li>
      </transition-group>
    </div>

items: [1, 2, 3, 4, 5, 6, 7, 8, 9],


shuffle () {
      this.items = _.shuffle(this.items);
    }

动画

.flip-list-move {
    transition: transform 1s;
  }