Vue.js動畫無法正常工作

我正在使用Vue 2並嘗試在頻繁創建和銷燬的元素上包含CSS動畫。下面是我的代碼示例：Vue.js動畫無法正常工作

export default { 
 
    name: 'MyElement', 
 
    methods: { 
 
     enterStart: function (el) { 
 
     console.log('about to enter'); 
 
     el.classList.add('testing-enter'); 
 
     }, 
 
     enter: function (el) { 
 
     console.log('entered'); 
 
     }, 
 
     leaveStart: function (el) { 
 
     console.log('starting to leave!'); 
 
     }, 
 
     leave: function (el) { 
 
     console.log('leaving!'); 
 
     }, 
 
    } 
 
    };

.testing-enter { 
 
    animation: enter .2s; 
 
} 
 

 
.testing-leave { 
 
    animation: leave .2s; 
 
} 
 

 
@keyframes enter { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
} 
 
@keyframes leave { 
 
    0% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
    } 
 
}

<template> 
 
    <div> 
 
    <transition 
 
     @before-enter="enterStart" 
 
     @enter="enter" 
 
     @leave="leaveStart" 
 
     @leave-active="leave" 
 
     appear 
 
    > 
 
     <div>My element is here!</div> 
 
    </transition> 
 
    </div> 
 
</template>

首先，這一切都不工作，除非我有appear在我<transition ...>元素。我知道這會使轉換在初始渲染時發生，但是我希望它們在元素被創建或銷燬時發生。

接下來，在我的控制檯中。我可以看到enterStart和enter都運行，但是leaveStart和leave從不運行，即使元素被破壞。我究竟做錯了什麼？

來源

2017-03-15 Zach

我剛剛創造了這個codepen測試[鏈接]（http://codepen.io/marceloch2/ pen/oZGpPd？editors = 1000） – marceloch2

@ marceloch2謝謝！ – Zach

轉換中的元素需要一個狀態（顯示或隱藏）。此外，您的轉換需要一個必須多在CSS和過渡應該與

NAME = 「transitionName」

如命名名稱：

new Vue({ 
 
    el: "#app", 
 
    data: function() { 
 
    return { 
 
     showThisElement: false 
 
    } 
 
    }, 
 
    methods: { 
 
    toggleShow: function() { 
 
     this.showThisElement = !this.showThisElement 
 
    } 
 
    } 
 
});

.testing-enter-active { 
 
     animation: enter .2s; 
 
    } 
 

 
    .testing-leave-active { 
 
     animation: leave .2s; 
 
    } 
 

 
    @keyframes enter { 
 
     0% { 
 
     opacity: 0; 
 
     transform: scale(0); 
 
     } 
 
     100% { 
 
     opacity: 1; 
 
     transform: scale(1); 
 
     } 
 
    } 
 
    @keyframes leave { 
 
     0% { 
 
     opacity: 1; 
 
     transform: scale(1); 
 
     } 
 
     100% { 
 
     opacity: 0; 
 
     transform: scale(0); 
 
     } 
 
    }

<div id="app"> 
 
    
 
    <div @click="toggleShow">Show/Hide</div> 
 
    
 
    <transition 
 
    name="testing"> 
 

 
    <div v-if="showThisElement">My element is here!</div> 
 

 
    </transition> 
 
</div>

在codepen中，點擊'顯示/隱藏'切換轉換。

http://codepen.io/anon/pen/WpZPJp

來源

2017-03-16 09:35:46

謝謝你的工作示例。所以我需要一個切換的事實在我的計劃中引發了一個問題。在我的應用程序中，此組件是較大集合組件的一個小子項。它沒有隱藏或顯示它的按鈕，它只是在父容器組件中的'v-for ...'中呈現。對於我如何仍然可以獲得動畫行爲來適應我的物品渲染方式，您有任何建議嗎？ – Zach

問題解決了！

因此，我從個別組件中取出transition，並在呈現它們的容器組件周圍創建了一個transition-group。

然後，在多讀一讀之後，我意識到我想將mode="out-in"字段添加到我的transition-group中，以便在渲染新元素之前將剩下的元素完全製作成動畫。

我還查看了動畫應該發生的HTML，看看Vue添加了什麼類。它看起來像Vue添加了v-enter-active, v-enter-to,和v-leave-to。與其定製任何名稱，我只是堅持使用這些類，並將樣式中的動畫添加到它們中。

希望，如果有人想別的類似的效果，該功能有助於減少他們的壓力水平有點...

來源

2017-03-16 15:22:45 Zach

Vue.js動畫無法正常工作

回答

相關問題