Переход элемента на изменение маршрута - PullRequest
Новая
       12

Переход элемента на изменение маршрута

2 голосов
/ 24 сентября 2019

Я пытаюсь перенести этот svg на страницу при изменении маршрута.Я попытался установить наблюдателя, поэтому, когда путь маршрута 'comp1': 'comp2', он должен анимироваться в зависимости от результата.

имя перехода изменяется правильно, но анимация не запускается ...

Хотелось бы помочь, чтобы узнать, возможно ли это, и если да, то где я ошибаюсь?

Спасибо 

<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>

1 Ответ

0 голосов
/ 24 сентября 2019

То, что вы хотите использовать, это vue привязки класса с обычным div.

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


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

            }


    }

 }

Это не самый эффективный способ сделать это, но это краткая идея

Если вы увлечены переходами CSS w3schools объясняет это очень хорошо

...