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

我将“ out”动画更改为不执行反向的“ in”动画，而是执行了自己的动画。那以某种方式起作用

Vue：类更改时的CSS动画

1 个答案: