时间戳

首页 > 解决方案 > 在路由更改上转换元素

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

问题描述

当路线更改时，我正在尝试在整个页面上转换此 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>

标签： vue.jsanimationtransitionvue-router

解决方案

您要使用的是仅具有常规 div的 vue类绑定。

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


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

            }


    }

 }

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

如果你对 css 转换感到困惑， w3schools解释得很好

推荐阅读