Vue.js를 사용하여 목록에서 다른 목록으로 이동하는 작업을 애니메이션화하는 방법

Vue.js를 사용하여 목록에서 다른 목록으로 이동하는 작업을 애니메이션화하는 방법

저는 Vue.js로 움직이는 애니메이션을 하기 위해 이 svelte 예시를 하려고 합니다.

아래에서 내가 지금까지 한 일을 볼 수 있다.'ToDo'를 클릭하면 됩니다.

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 500px;
  transition: all 0.2s;
}

.todos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.todo {
  border: 1px solid #ccc;
}

.todo.undone {
  grid-column: 2 /span 1;
}

.todo.done {
  grid-column: 1 /span 1;
  background: blue;
  color: white;
}

.flip-list-move {
  transition: all 1s ease-in-out;
}

.header-wrapper {
  display: grid;
  grid-auto-flow: column;
  
}

.header, .todo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">


  <div class="header-wrapper">
   <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  
    <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  </div>

  <transition-group name="flip-list" tag="div" class="todos">

    <div class="todo done" v-for="item of done" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>26</span>
      <span>Male</span>
    </div>

    <div class="todo undone" v-for="item of undone" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>20</span>
      <span>Male</span>
    </div> 

   
  </transition-group>
</div>

목록 간에 ToDo 이동을 애니메이션으로 만들기 위해 CSS 그리드를 사용했는데 비어있는 그리드 셀이 없으면 ToDo(좌우)를 구분할 수 없습니다.

svelte documents의 예를 실현하기 위한 더 좋은 방법이나 빈 셀을 생략할 수 있는 방법이 있으면 좋겠습니다.

처음에는 쉬울 것 같았는데 조금 까다롭네요.

첫 번째 요소를 타겟으로 하려면index에서v-for루프. 인덱스0항상 첫 번째 요소가 될 것입니다.그리고 다음과 같은 스타일로 해주세요.

grid-row-start: 1;

데모 편집:

new Vue({
  el: "#app",
  data: {
    items: [
    	{ id: 1, name: 'John', done: false },
      { id: 2, name: 'Jane', done: false },
      { id: 3, name: 'Jade', done: true },
      { id: 4, name: 'George', done: true },
    ]
  },
  
  computed: {
  	done () {
    	return this.items.filter(i => i.done)
    },
    
    undone () {
    	return this.items.filter(i => !i.done)
    }
  },
  
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 500px;
  transition: all 0.2s;
}

.todos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.todo {
  border: 1px solid #ccc;
}

.todo.undone {
  grid-column: 2 /span 1;
}

.todo.done {
  grid-column: 1 /span 1;
  background: blue;
  color: white;
}

.first-right {
    grid-row-start: 1;
}

.flip-list-move {
  transition: all 1s ease-in-out;
}

.header-wrapper {
  display: grid;
  grid-auto-flow: column;
  
}

.header, .todo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">


  <div class="header-wrapper">
   <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  
    <div class="header">
    <span>Name</span>
    <span>Age</span>
    <span>Gender</span>
  </div>
  </div>

  <transition-group name="flip-list" tag="div" class="todos">

    <div class="todo done" v-for="item of done" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>26</span>
      <span>Male</span>
    </div>

    <div :class="['todo', 'undone', { 'first-right': index === 0 }]" v-for="(item, index) of undone" :key="item.id" @click="toggle(item)">
      <span>{{item.name}}</span>
      <span>20</span>
      <span>Male</span>
    </div> 

   
  </transition-group>
</div>

추가 중grid-row-start배열에 항목이 6개 이상 있으면 첫 번째 실행 취소된 요소로 이동할 수 없습니다.

그 해결책으로,index의v-for모든 미완료에 추가해서 대응하는 루프에 추가하다grid-row-start.

index0시에 시작하니까 우리가 만들어야 돼index + 1

  <div
    class="todo undone"
    v-for="(item, index) of undone"
    :key="item.id"
    :style="{'grid-row': index + 1}" // => HERE we guarantee no gaps are present in undone list`
    @click="toggle(item)"
  >
    <span>{{item.name}}</span>
    <span>20</span>
    <span>Male</span>
  </div>

이 코드와 상자에서 작업 예를 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/59567349/how-to-animate-todo-moving-from-one-list-to-another-with-vue-js