- Vue.js 2 Web Development Projects
- Guillaume Chau
- 68字
- 2021-07-02 22:34:35
The overlay animation
Like we did with the hand, we will use a transition to animate the overlay.
- Add a transition called "zoom" around the overlay component:
<transition name="zoom">
<overlay v-if="activeOverlay">
<component :is="'overlay-content-' + activeOverlay"
:player="currentPlayer" :opponent="currentOpponent"
:players="players" />
</overlay>
</transition>
- Add the following CSS rules in the transition.css file:
.zoom-enter-active,
.zoom-leave-active {
transition: opacity .3s, transform .3s;
}
.zoom-enter,
.zoom-leave-to {
opacity: 0;
transform: scale(.7);
}
This is a simple animation that will zoom out the overlay while fading it out.
推薦閱讀
- 極簡算法史:從數學到機器的故事
- Node.js Design Patterns
- Java性能權威指南(第2版)
- C++ 從入門到項目實踐(超值版)
- 快人一步:系統性能提高之道
- 從零開始學C#
- Scratch3.0趣味編程動手玩:比賽訓練營
- Python爬蟲、數據分析與可視化:工具詳解與案例實戰
- 時空數據建模及其應用
- Struts 2.x權威指南
- Visual Basic程序設計全程指南
- Oracle Data Guard 11gR2 Administration Beginner's Guide
- Mobile Forensics:Advanced Investigative Strategies
- PHP項目開發全程實錄(第4版)
- JavaEE架構與程序設計