vue.js - 在路由更改时转换元素

Question

当路线改变时，我试图在页面上转换这个 svg。我已经尝试设置一个观察者，所以当路由路径是 'comp1':'comp2' 时，它应该根据结果设置动画。

transitionName 正确更改，但动画未触发...

想知道这是否可行，如果可行，我哪里出错了？

谢谢

<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

你要用的是vue class bindings只有一个普通的 div。

<div :class="currentTranstion">Your SVG</div>


computed: {
    currentTransition: ()=>{
            return{
                comp1: router.currentRoute === one;
                comp2: router.currentRoute === two;
                
            }
        

    }

 }

这不是最有效的方法，但这是一个简单的想法

如果您对 css 转换感到困惑 w3schools解释的很好