[游戏开发]vue点击上移下移 动画

如果是for循环内容需要用到 transition-group标签

vue的页面

    <transition-group name="flip-list">
          <div class="removeCode"
               v-for="(item, index) in selectList"
               :key="item"
          >
            <div>
              <span>
              {{item.menu_name}}
              </span>
            </div>
            <div>
              <button @click="remove(item, index,-1)" v-show="index > 0">
                上移
              </button >
              <button @click="remove(item, index,+1)" v-show="index < selectList.length-1">
                下移
              </button>
            </div>
          </div>
        </transition-group>

data里面

selectList: [
	{
		menu_name: '文明'
	},	{
		menu_name: '和谐'
	}
]

methods里面写方法

   remove (item, index, num) {
      let temp = this.selectList[index]
      this.$set(this.selectList, index, this.selectList[index + num])
      this.$set(this.selectList, index + num, temp)
    },

css里添加

//flip-list是上面 name的名字
.flip-list-move {
  transition: transform 1s;
}

详细参考https://cn.vuejs.org/v2/guide/transitions.html