Transitions as functions don't seem to work.

[SalvoLunar]

Hi,

The documentation doesn't seem particularly clear in regard to transition as functions in page components:

within index.vue and profiles.vue I've defined my transition this way:

transition (to, from) {
    if (!from) {
      return 'slide-left'
    }
    console.log(from.name === 'profiles' ? 'slideLeft' : 'slideRight')
    return from.name === 'profiles' ? 'slideLeft' : 'slideRight'
}

and in common.scss I have defined the following

.slideLeft-enter-active, .slideLeft-leave-active,.slideRight-enter-active, .slideRight-leave-active {
  transition: all 1.5s;
}

.slideLeft-enter-to {
  transform: translateX(-50%);
  opacity: 0;
}
.slideRight-enter-to{
  transform: translateX(50%);
  opacity: 0;
}

But when I move navigate from index to profiles nothing happens.

Through Vue Inspector i can see that the transition element is there but it doesn't change.

What am I doing wrong?