Vue.js 2 Web Development Projects

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.

1. 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 ...