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

您要使用的是带有常规div的vue class bindings。

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


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

            }


    }

 }

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

如果您对CSS转换感到困惑，w3schools会很好地解释

转换路线更改中的元素

1 个答案: