vuejs 애니메이트 그리드에 있는 항목 나열

vuejs 애니메이트 그리드에 있는 항목 나열

나는 vuejs를 사용하여 그리드 내에서 목록 항목을 생성했다. 나는 클래스 이름을 변경하여 그리드 내부의 셀 내용을 동적으로 업데이트하고 있다.css3 애니메이션을 사용하여 셀 내부의 요소를 바꾸고 싶다.전환 그룹 I을 사용하여 css 애니메이션을 적용했지만 제대로 작동하지 않음, css 클래스가 적용됨에 따라 다음 줄까지 떨어지는 새로운 요소를 생성하고 이전 요소를 숨긴다.어떻게 하면 세포 바로 안에서 애니메이션을 만들 수 있을까?

여기 jsfiddle이 있다: https://jsfiddle.net/49gptnad/274/

<div id="vue-instance">
  <transition-group tag="div" name="fade" class="uk-grid">
    <div class="uk-width-1-2" v-for="item in thumbs" :key="item.id">
      <div class="item">
        <i class="fa" :class="item.icon" aria-hidden="true"></i>
        <h3>{{item.name}}</h3>
      </div>      
    </div>
  </transition-group>
</div>

가장 간단한 해결책은 이전 아이콘을 숨기는 것이다.

.fade-enter-active {
  display: none;
}

여기 업데이트된 fiddle.

이런 것을 시도해 볼 수 있다.

.item {
    text-align: center;
    font-size: 20px;
    transition: opacity .5s;
    animation: fade .5s;
}

@keyframes fade {
    from {opacity: 0;}
    to {opacity: 1;}
}

https://jsfiddle.net/49gptnad/1338/

html에서 전환을 없애고 간단한 키프레임 애니메이션을 추가했다.

참조URL: https://stackoverflow.com/questions/43536971/vuejs-animate-list-items-inside-grid