Vue：關於類更改的 CSS 動畫

Question

我正在 Vue 中創建一個漢堡菜單組件，但由於某種原因動畫不起作用。 它得到了動畫的最終結果，但沒有動畫。

我通過類更改觸發動畫。

我已經閱讀了一些關於 Vue 轉換的內容，但在我看來，這些似乎主要用於實際刪除或添加元素時，我沒有這樣做，只是更改元素中的樣式。

如果有任何幫助，我將在下面包含整個組件。

<template>
  <div id="hamburgerWrapper" @click="changeClass()">
    <div id="hamburger1" :class="classObject"></div>
    <div id="hamburger2"></div>
    <div id="hamburger3" :class="classObject"></div>
  </div>
</template>

<script>
export default {
  name: "hamburger",
  data() {
    return {
      active: false
    };
  },
  computed: {
    classObject: function(){
      return {
        in: this.active,
        out: !this.active
      }
    }
  },
  methods: {
    changeClass(){
      this.active = !this.active
    }
  }
};
</script>

<style lang="scss">

$height: 300px;
$width: $height;

#hamburgerWrapper{
  margin-top: 30px;
  margin-left: 30px;
  width: $width;
  height: $height;
  background-color: rgb(192, 192, 192);
  position: relative;
  cursor: pointer;

  #hamburger1,#hamburger2,#hamburger3{
    position: absolute;
    height: $height * 0.2;
    width: $width;
    background-color: blue;
    border-radius: $height * 0.1;
  }

  #hamburger1{
    top: 0;
    //transform: translateY(($height/2)-($height * 0.1));
    &.in{
      animation: topIn 1s ease forwards;
    }
    &.out{
      animation: topIn 1s ease reverse forwards;
    }
  }

  #hamburger2{
    top: 50%;
    transform: translateY(-50%);
  }

  #hamburger3{
    bottom: 0;
    &.in{
      animation: botIn 1s ease forwards;
    }
    &.out{
      animation: botIn 1s ease reverse forwards;
    }
  }
}

@keyframes topIn {
  0%   {transform: translateY(0) rotate(0deg)}
  50%  {transform: translateY(($height/2)-($height * 0.1)) rotate(0deg)}
  100% {transform: translateY(($height/2)-($height * 0.1)) rotate(45deg)}
}

@keyframes botIn {
  0%   {transform: translateY(0) rotate(0deg)}
  50%  {transform: translateY(-(($height/2)-($height * 0.1))) rotate(0deg)}
  100% {transform: translateY(-(($height/2)-($height * 0.1))) rotate(-45deg)}
}
</style>

Answer 1

我改變了“出”動畫，而不是做相反的“入”動畫，而是一個自己的動畫。 那以某種方式起作用了。