#VUE 列表项目置顶过渡动画

VUE 列表项目置顶过渡动画

<div id="flip-list-demo" class="demo">
  <transition-group name="flip-list" tag="p">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
      <button v-on:click="calling(item)">置顶</button>
      <button v-show="items.indexOf(item)==0">完成</button>
    </li>
  </transition-group>
</div>

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    },
    calling:function (item) {
    	let middleValue = item;
      this.items.splice(this.items.indexOf(item),1);
      this.items.unshift(middleValue);
     
  
    
    
    }
  }
})

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

jsfiddle_demo
https://jsfiddle.net/jaycethanks/b9n6pch8/1/