JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div id="app">
  <swipe-list :items="list"></swipe-list>
  <hr>
  {{list}}
</div>


<template id="swipe-list-tpl">
  <transition-group name="swap-list" tag="ul">
    <li v-for="(item, index) in items" ref="item" :key="item">
      {{item.name}}
      <button @click="swipe('up', index)">up</button>
      <button @click="swipe('down', index)">down</button>
    </li>
  </transition-group>
</template>

SCSS

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

.swap-list-enter-active {
  transform: scale(.9);
}

ul {
  margin: 0;
  padding: 0;
  
  li {
    background: #fff;
    line-height: 60px;
    text-align: center;
    list-style: none;
    margin-top: 15px;
    box-shadow: 0px 0px 4px 3px rgba(0,0,0,.1);
  }
  
  .trans {
    transition: all .3s ease-in-out;
  }
  
  .scale_up {
      transform: scale(1.1);
      box-shadow: 0px 0px 7px 5px rgba(0,0,0,.1);
      z-index: 10;
    }
    
   .scale_down {
      transform: scale(.9);
      z-index: 9;
    }
}

JavaScript

// Component
Vue.component('swipe-list', {
	props: {
  	items: Array,
  },
	template: '#swipe-list-tpl',
  methods: {
  	swipe(trend, index) {
      if(trend == 'up' && index) {
      	let newIndex = index-1; 
        let replaceItem = this.items[newIndex];
        
        this.items[newIndex] = this.items[index];
        Vue.set(this.items, index, replaceItem);
      }
      
      if(trend == 'down' && index < (this.items.length-1)) {
      	let newIndex = index+1; 
        let replaceItem = this.items[newIndex];
        
        this.items[newIndex] = this.items[index];
        Vue.set(this.items, index, replaceItem);
      }
    }
  } 
});


// init
new Vue({
	el: '#app',
  data() {
  	return {
    	list: [{name: '1'}, {name: '2'}, {name: '3'}]
    }
  },
});