Vue.js의 전환이 올바르게 작동하지 않습니다.

동적으로 추가 할 때 <tr>을 애니메이트하려고합니다. 그러나 그것은에 추가됩니다. 여기 내 코드가있다. 나는 당신을 도움이되기를 바랍니다Vue.js의 전환이 올바르게 작동하지 않습니다.

<transition-group tag="tbody" enter-active-class="animated fadeInUp">     
    <tr v-for="(product, index) in products" v-bind:key="index">      
      <td>{{ index + 1 }}</td> 
      <td>{{ product.name }}</td> 
      <td>{{ product.quantity }}</td> 
      <td> 
      {{ product.price }} 
      <span class="glyphicon glyphicon-remove control-btn pull-right" @click="removeProduct(index)"></span> 
      <span class="glyphicon glyphicon-pencil control-btn pull-right" @click="show(index)"></span> 
      </td>      
    </tr> 
</transition-group>

출처

2017-12-20 Камилов Тимур

그냥이 문제를 읽기 : 여기

Screenshot of the DevTools

–

@VitalyMatvievich 전에이 문제를 보았지만 도움이 안되었습니다. 다른 아이디어? 고마워. –

유일한 방법은 테이블을 다른 태그로 변경하는 것입니다. 그걸보세요 : https://jsfiddle.net/jaco2h22/57/. 테이블은 여기에 필요한 행동을 제공하지 않습니다. 그것은 당신이 기대하는 것이 아니지만 여기서 유일한 해결책이라고 생각합니다. 예를 들어 프로젝트를 수행 할 수 있다면 레이아웃을 수정하기 위해 모든 것을 변경해야합니다. –

<tbody> 
    <transition-group tag="tr" enter-active-class="animated fadeInUp">  
      <tr v-for="(product, index) in products" v-bind:key="product">      
      <td>{{ index + 1 }}</td> 
      <td>{{ product.name }}</td> 
      <td>{{ product.quantity }}</td> 
      <td> 
       {{ product.price }} 
       <span class="glyphicon glyphicon-remove control-btn pull-right" @click="removeProduct(index)"></span> 
       <span class="glyphicon glyphicon-pencil control-btn pull-right" @click="show(index)"></span> 
      </td>      
      </tr> 
    </transition-group> 
    <!-- Итого -->   
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td><strong>Итог:</strong> {{ total }}</td> 
    </tr> 
</tbody>

이 솔루션의 https://github.com/vuejs/vue/issues/3907

출처

2017-12-20 09:59:50

Vue.js의 전환이 올바르게 작동하지 않습니다.

답변

관련 문제