Vue：关于类更改的 CSS 动画

Question

I am creating a hamburger menu component in Vue but for some reason the animations do not work. It gets to what should be the end result of the animation, but there is no animation.

I trigger the animation through a class change.

I've read up some on Vue transitions but to me it seems like those are mostly used when actually removing or adding elements, which I am not doing, just changing styling in an element.

I include the whole component below, if it is of any help.

<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

I changed the "out"-animation to not do the reversed "in"-animation, but instead just an own animation. That somehow worked.