Transition an element on a route change - vue.js

Question

I'm trying to transition this svg across the page when the route changes.
I've tried setting a watcher so when route path is 'comp1':'comp2' it should animate depending on the result.
The transitionName changes correctly, but the animation isn't firing...
Would love some help to know if this is possible and If so where I'm going wrong?
Thanks
<template>
<div class="background">
<div class="background__content">
<transition :name="transitionName"
mode="out-in">
<figure class="background__shape--primary">
<svg viewBox="-5 -10 130 130">
<path d="m0 0, 120 0, -60 100Z">
</path>
</svg>
</figure>
</transition>
</div>
</div>
</template>
<script>
data(){
return {
transitionName: '',
}
},
watch: {
$route(to){
let path = to.path;
if(path === '/one'){
this.transitionName = 'comp1';
}
else {
this.transitionName = 'comp2';
}
}
},
</script>
<style>
enter code here
.comp1-enter-active{
transform: translate(20px, -50px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp1-enter,
.comp1-leave-active{
opacity: 0;
transform: translate(20px, -50px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp1-leave-active,
.comp1-enter {
opacity: 0;
animation-delay: 300ms;
transform:translate(-26px, 80px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp2-enter,
.comp2-leave-active{
opacity: 0;
transform: translate(50px, 20px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp2-leave-active,
.comp2-enter {
opacity: 0;
animation-delay: 300ms;
transform:translate(10px, 15px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
</style>

Answer 1

What you want to use is vue class bindings with just a regular div.
<div :class="currentTranstion">Your SVG</div>
computed: {
currentTransition: ()=>{
return{
comp1: router.currentRoute === one;
comp2: router.currentRoute === two;
}
}
}
This is not the most effcient way to do it but it is a breif idea
If you are cofused about css transtions w3schools explains it very well