Моя иконка будет вращаться вперед на 180 градусов, но не будет вращаться назад. Vue - PullRequest
Новая
       52

Моя иконка будет вращаться вперед на 180 градусов, но не будет вращаться назад. Vue

0 голосов
/ 30 апреля 2020

Как заставить мой значок вращаться взад и вперед при нажатии? 

<i class='fas fa-chevron-down' id="chevron" @click="showBusinessLinks = !showBusinessLinks" style="font-size:9px;text-decoration:none;margin-left:49px;"></i>

#chevron {
  transition: transform .5s ease-in-out;
}
#chevron:hover {
  transform: rotateZ(180deg);
}

1 Ответ

0 голосов
/ 30 апреля 2020

Попробуйте, вы должны добавить transition в обоих случаях, чтобы перейти обратно 

    #chevron {
      transform: rotate(0deg);
      transform-origin: center center;
      transition: transform .5s ease-in-out;
    }
    #chevron:hover {
      transform: rotate(180deg);
      transform-origin: center center;
      transition: transform .5s ease-in-out;
    }
<span id="chevron" style="display:inline-block">Hover me</span>

Если, с другой стороны, вы хотите, чтобы анимация происходила одним щелчком мыши (но не при наведении курсора), тогда, возможно, лучше использовать animation вместо transition, поскольку анимация может за один шаг перемещаться назад и вперед любым способом, который вы определите для этого. Например: 

#chevron {
   transform-origin: center center;
}
#chevron:active {
  animation: rotate 1s ease-in-out 0s;
 }


@keyframes rotate{
  0%{ transform: rotate(0deg);}
  50%{ transform: rotate(180deg);}
  100%{ transform: rotate(0deg);}
}
<span id="chevron" style="display:inline-block">Press me</span>

Для одного клика вперед и одного клика сделайте что-то вроде: 

const chevron = document.getElementById('chevron');
chevron.addEventListener('click', (evt) => {
  if ( chevron.classList.contains('rotate') )
  {
       chevron.classList.remove('rotate');
       chevron.classList.add('rotate-back');
  }
  else
  {
       chevron.classList.remove('rotate-back');
       chevron.classList.add('rotate');
  }
 
}, false);
#chevron {
  transform-origin: center center;
  display:inline-block;
}
.rotate {
 animation: rotate 0.5s ease-in-out 0s 1 normal forwards;
}
.rotate-back {
 animation: rotate-back 0.5s ease-in-out 0s 1 normal forwards;
}

@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(180deg);
  }
}

@keyframes rotate-back{
  from{
    transform: rotate(180deg);
  }
  to{
    transform: rotate(0deg);
  }
}
<span id="chevron">Click me</span>
...