Vue: CSS анимация при смене класса - PullRequest
Новая
       8

Vue: CSS анимация при смене класса

0 голосов
/ 18 октября 2018

Я создаю компонент меню гамбургера в 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>

1 Ответ

0 голосов
/ 18 октября 2018

Я изменил "out" -анимацию, чтобы не делать обращенную "in" -анимацию, а вместо этого просто собственную анимацию.Это как-то сработало.

...