- Vue.js 2 Web Development Projects
- Guillaume Chau
- 221字
- 2021-07-02 22:34:35
Key attribute
For now, if you try the animation in the browser, it should only work in two cases:
- When you don't have any overlay displayed, and you set one
- When you have an overlay shown and you set activeOverlay to null to hide it
If you switch between the overlays, the animation will not work. This is because of the way Vue updates the DOM; as we saw earlier in the The key special attribute section, it will reuse DOM elements as much as possible to optimize performance. In that case, we will need to use the key special attribute to give Vue a hint that we would like to treat the different overlays as separate elements. So, when we transition from one overlay to the other, both will be present in the DOM, and the animations can be played.
Let's add the key to our overlay component so that Vue will treat it as multiple separate elements when we change the activeOverlay value:
<transition name="zoom">
<overlay v-if="activeOverlay" :key="activeOverlay">
<component :is="'overlay-content-' + activeOverlay" :player="currentPlayer" :opponent="currentOpponent" :players="players" />
</overlay>
</transition>
Now, if we set activeOverlay to 'player-turn', the overlay will have a key of 'player-turn'. Then, if we set activeOverlay to 'last-play', an entirely new overlay will be created with a key of 'last-play', and we can animate the transition between the two. You can try this in the browser by setting different values to state.activeOverlay.
- 深入核心的敏捷開發(fā):ThoughtWorks五大關(guān)鍵實踐
- Facebook Application Development with Graph API Cookbook
- Mobile Web Performance Optimization
- NumPy Essentials
- Learning Apache Kafka(Second Edition)
- Yocto for Raspberry Pi
- Learning Data Mining with R
- C++20高級編程
- Learning AWS
- Domain-Driven Design in PHP
- 大學(xué)計算機基礎(chǔ)實驗指導(dǎo)
- Python預(yù)測之美:數(shù)據(jù)分析與算法實戰(zhàn)(雙色)
- ASP.NET開發(fā)寶典
- 算法(第4版)
- C#從入門到精通(第5版)