Vue.js + css grid Моя простая анимация слайдов не работает, если div-элемент обернут в ссылку на маршрутизатор

Question

Я работаю над портфолио с мобильным первым подходом в Vue.js.Я использую систему css-grid для размещения своих элементов.Это прекрасно работает, но мне трудно с простой анимацией слайдов.Я пытаюсь вставить в div, завернутый в ссылку маршрутизатора, это снова завернуто в переход.Я дал маршрутизатору ссылку на класс link-1, чтобы я мог расположить его в области сетки-шаблона.К div с классом box-2 прикреплена та же анимация, и она работает точно так, как я хочу.Разница в том, что анимация разрывается с div, завернутым в ссылку на маршрутизатор.Я действительно застрял здесь, и я попытался изменить положение: относительно абсолютного и т. Д. На link-1 и box-1, но анимация все еще не работает.Любые советы приветствуются!кодовая ручка: https://codesandbox.io/s/vue-template-wst4u?fontsize=14

<style >
body {
  background-color: #292929;
}

.wrapper {
  height: 100vh;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "logo logo logo logo"
    "link-1 link-1 link-1 link-1"
    "box-2 box-2 box-2 box-2"
    "box-3 box-3 box-3 box-3"
    "box-4 box-4 box-4 box-4"
    "facebook-logo instagram-logo linkedin-logo github-logo";
}
.logo {
  grid-area: logo;
  justify-self: center;
}
.link-1 {
  position: relative;
  grid-area: link-1;
  justify-self: center;
}
.box-1 {
  grid-area: box-1;
  position: relative;
  width: 100px;
  height: 100px;
  justify-self: center;
  background-color: #020100;
}
.box-2 {
  position: relative;
  grid-area: box-2;
  width: 100px;
  height: 100px;
  background-color: #aa7c36;
  justify-self: center;
}
.box-3 {
  grid-area: box-3;
  width: 100px;
  height: 100px;
  background-color: #020100;
  justify-self: center;
}
.box-4 {
  grid-area: box-4;
  width: 100px;
  height: 100px;
  background-color: #aa7c36;
  justify-self: center;
}
.facebook-logo {
  grid-area: facebook-logo;
  justify-self: center;
}
.instagram-logo {
  grid-area: instagram-logo;
  justify-self: center;
}
.linkedin-logo {
  grid-area: linkedin-logo;
  justify-self: center;
}
.github-logo {
  grid-area: github-logo;
  justify-self: center;
}
.slide-in-left-enter-active {
  animation: slidein-left 2s ease-in forwards;
}
.slide-in-left2-enter-active {
  animation: slidein-left 2s ease-in forwards;
}

@keyframes slidein-left {
  0% {
    left: -70%;
  }
  70% {
    border-radius: 50% 50%;
    background-color: #6b9b31;
  }
  90% {
    left: 10%;
    border-radius: 70% 70% 70% 70%;
  }
  100% {
    left: 0%;
  }
}
@keyframes slidein-left2 {
  0% {
    left: -110%;
  }
  50% {
    border-radius: 50% 50%;
    background-color: #6b9b31;
  }
  90% {
    left: 10%;
    border-radius: 70% 70% 70% 70%;
  }
  100% {
    left: 0%;
  }
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="home">
    <div class="wrapper">
      <router-link :to="{name: 'home'}" tag="p" class="logo">
        <app-logo></app-logo>
      </router-link>

      <transition name="slide-in-left2" appear>
        <router-link :to="{name: 'projects'}" class="link-1">
          <div class="box-1"></div>
        </router-link>
      </transition>
      <transition name="slide-in-left" appear>
        <div class="box-2"></div>
      </transition>
      <div class="box-3"></div>
      <div class="box-4"></div>
      <div class="facebook-logo">
        <img src="../assets/facebook-logo.png" />
      </div>
      <div class="instagram-logo">
        <img src="../assets/instagram-logo.png" />
      </div>
      <div class="linkedin-logo">
        <img src="../assets/linkedin-logo.png" />
      </div>
      <div class="github-logo">
        <img src="../assets/github-logo.png" />
      </div>
    </div>
  </div>
</template>