We can use Vue's transition classes as JavaScript methods. Just like lifecycle hooks, we don't have to access any of them. Or we can cherry-pick those that we want to use. To begin, inside our Vue constructor's methods option, we could specify what to do with all of them:
methods: {
// ENTER transitions...
beforeEnter: function(el) {},
enter: function(el, done) {},
afterEnter: function(el) {},
enterCancelled: function(el) {},
// LEAVE transitions...
beforeLeave: function(el) {},
leave: function(el,done) {},
afterLeave: function(el) {},
leaveCancelled: function(el) {},
}As we can see, we have four methods for enter transitions and another four methods for leave transitions. All of the methods take in the el argument and the enter and leave methods also take in the done argument to signify the completion of an animation. If the done argument was not used, the hooks would be called without waiting for the done callback to...