- Vue.js 2 Web Development Projects
- Guillaume Chau
- 378字
- 2021-07-02 22:34:34
The CSS transitions
Like before, we have the following six CSS classes at our disposable, prefixed with the name of our group transition, 'card': card-enter-active, card-enter, card-enter-to, card-leave-active, card-leave, and card-leave-to. They will be applied to the direct children of the group transition, that is, our cards components.
- The group transition has an additional class applied to moving items--v-move. Vue will use the CSS transform property on the items to make them move, so we just need to apply a CSS transition on it with at least a duration:
.card-move {
transition: transform .3s;
}
Now, when you click on a card to play it, it should disappear and the remaining cards will move to their new position. You can also add cards to the hand.
- Select the main component in the Vue devtools and execute this into the browser console:
state.testHand.push($vm.testDrawCard())
Selecting a component in the devtools exposes it in the browser console as $vm.
Like we did for the hand, we will also add animations for the cards when they enter the hand, and when they are played (and thus leave the hand).
- Since we need to transition multiple CSS properties on the card with the same timings all the time (except during the leave transition), we will change the .card-move rule we just wrote into this:
.card {
/* Used for enter, move and mouse over animations */
transition: all .3s;
}
- For the enter animation, specify the state of the card for the start of the transition:
.card-enter {
opacity: 0;
/* Slide from the right */
transform: scale(.8) translateX(100px);
}
- The leave animation requires a few more rules since the play card animation is more complex, and involves zooming the card upward:
.card-leave-active {
/* We need different timings for the leave transition */
transition: all 1s, opacity .5s .5s;
/* Keep it in the same horizontal position */
position: absolute !important;
/* Make it painted over the other cards */
z-index: 10;
/* Unclickable during the transition */
pointer-events: none;
}
.card-leave-to {
opacity: 0;
/* Zoom the card upwards */
transform: translateX(-106px) translateY(-300px) scale(1.5);
}
This is enough to make your cards all properly animated. You can try playing and adding cards to the hand again to see the result.
- 精通JavaScript+jQuery:100%動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)密碼
- PHP程序設(shè)計(jì)(慕課版)
- iOS開(kāi)發(fā)實(shí)戰(zhàn):從零基礎(chǔ)到App Store上架
- 數(shù)據(jù)結(jié)構(gòu)(Python語(yǔ)言描述)(第2版)
- Scratch 3.0少兒編程與邏輯思維訓(xùn)練
- The DevOps 2.5 Toolkit
- 批調(diào)度與網(wǎng)絡(luò)問(wèn)題的組合算法
- scikit-learn Cookbook(Second Edition)
- C語(yǔ)言程序設(shè)計(jì)
- The Statistics and Calculus with Python Workshop
- Java高并發(fā)編程詳解:深入理解并發(fā)核心庫(kù)
- 視窗軟件設(shè)計(jì)和開(kāi)發(fā)自動(dòng)化:可視化D++語(yǔ)言
- Groovy 2 Cookbook
- 和孩子一起學(xué)編程:用Scratch玩Minecraft我的世界
- Oracle SOA Suite 12c Administrator's Guide