VUE JS錯誤的過渡組動畫位置

Question

起初我CSS初學者 我試圖讓VUE JS動畫一些項目和它的工作很好，但我錯了動畫

- 我們有按鈕添加元素數組隨機

- 我們可以單擊元素將其刪除

問題：

-The動畫總是在最後一個項目運行

我預計vue js應該在添加或刪除的項目上應用動畫

代碼中導致動畫出錯的錯誤是什麼？

我應該更改或添加以使動畫正常工作？

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myNumbers: [1, 2, 3, 4], 
 
    highestNumberInMyNumbers: 4 
 
    }, 
 
    methods: { 
 
    addNumber() { 
 
     this.highestNumberInMyNumbers++; 
 
     this.myNumbers.splice(Math.floor(Math.random() * this.myNumbers.length), 0, this.highestNumberInMyNumbers); 
 
    }, 
 
    removeNumber(element) { 
 
     this.myNumbers.splice(element, 1) 
 
    } 
 
    } 
 
})

.mix-enter { 
 
    opacity: 0; 
 
} 
 

 
.mix-enter-active { 
 
    transition: opacity 500ms; 
 
    animation: mixing-in 600ms ease-in forwards; 
 
} 
 

 
.mix-leave {} 
 

 
.mix-leave-active { 
 
    transition: opacity 1000ms; 
 
    animation: mixing-out 0.4s ease-in forwards; 
 
    opacity: 0; 
 
} 
 

 
@keyframes mixing-in { 
 
    from { 
 
    transform: translateX(-20px) translateY(20px); 
 
    } 
 
    to { 
 
    transform: translateX(0px) translateY(0px); 
 
    } 
 
} 
 

 
@keyframes mixing-out { 
 
    from { 
 
    transform: translateX(0px) translateY(0px); 
 
    } 
 
    to { 
 
    transform: translateX(-20px) translateY(-20px); 
 
    } 
 
}

<script src="https://vuejs.org/js/vue.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="app"> 
 
    <h2>group transition for directive v-for </h2> 
 
    <hr> 
 
    <button @click="addNumber">Add number</button> 
 
    <br> 
 
    <br> 
 
    <div class="row"> 
 
    <ul class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4"> 
 
     <transition-group name="mix" mode="out-in"> 
 

 
     <li class="alert alert-success list-unstyled" style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;" v-for="(number,index) in myNumbers" @click="removeNumber(index)" :key="index">{{number}} 
 
     </li> 
 
     </transition-group> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

有在transition-group一個錯誤！

當您綁定的li的key作爲index，每次你刪除一個li，動畫總是happend在最後li元素。

所以，如果你想使用動畫與li，你可以用你的情況number綁定key。

<transition-group name="mix" 
        mode="out-in"> 
    <li class="alert alert-success list-unstyled" 
     style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;" 
     v-for="(number,index) in myNumbers" 
     @click="removeNumber(index)" 
     :key="index"> 
     {{number}} 
    </li> 
</transition-group> 

VS

<transition-group name="mix" 
        mode="out-in"> 
    <li class="alert alert-success list-unstyled" 
     style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;" 
     v-for="(number,index) in myNumbers" 
     @click="removeNumber(index)" 
     :key="number"> 
     {{number}} 
    </li> 
</transition-group> 

最後，如果你使用的動畫與transition-group，不綁定key到index，而不是item或number（你的情況）。

無論如何，請確保key具有獨特的價值。