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())
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.