CSS Animation - рисование линии слева направо при наведении мыши, затем исчезание слева направо при отпускании мыши - PullRequest
Новая
       34

CSS Animation - рисование линии слева направо при наведении мыши, затем исчезание слева направо при отпускании мыши

0 голосов
/ 09 апреля 2019

Я пытаюсь анимировать линию, которая подчеркивает слева направо на «mouseenter», а затем исчезает слева направо на «mouseleave» вместо текущего поведения, когда оно исчезает справа налево.

Пример того, чего я пытаюсь достичь (но с анимацией, а не с переходами):

https://jsfiddle.net/1gyksyoa/

Я пытался отменить анимацию «рисовать», но это не такне достичь того, чего я пытаюсь достичь. 

        @keyframes draw-reverse {
      100% {
        width: 0;
        background-color: red;
      }

      0% {
        width: 47px;
        background-color: red;
      }

}

Я собрал это, чтобы лучше понять проблему;

https://jsfiddle.net/Lq560be9/

В настоящее времяУ меня есть линия, анимируемая слева направо по желанию на «mouseenter», но на «mouseleave» она исчезает справа налево, тогда как я пытаюсь заставить линию также исчезать слева направо.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2019

Как следует из вышеизложенного, альтернативное решение без с использованием свойства translate.

Новая анимация для mouseleave: 

@keyframes draw-reverse {

  0% {
    width: 47px;
  }

  25% {
    width: calc(100% - 16px);
  }
  26% {
    width: auto;
    right: 8px;
    left: 8px;
  }

  100% {
    width: auto;
    right: 8px;
    left: calc(100% - 8px);
  }
}

Полное решение можно увидеть здесь - https://jsfiddle.net/1wq25tg7/

0 голосов
/ 10 апреля 2019

Но проблема не в способности анимации, а в свойствах, которые вы анимируете. Вместо анимации ширины объекта вы должны анимировать его положение "X", используя translate. (это гораздо более производительно)

Проще говоря, вам нужно переместить полосу слева направо, а не пытаться масштабировать ее.

(здесь много кода, показывающего различные состояния, единственное, что вам действительно нужно соблюдать, это .ex4) 

document.querySelector('#animate').addEventListener('mouseenter', function(){
  this.classList.toggle('over');
})
document.querySelector('#animate').addEventListener('mouseleave',function(){
  this.classList.toggle('out');
})
.example {
 margin: 30px auto;
 padding: 10px;
 background: #dadada;
 max-width: 50%;
 position: relative;
 }
 .example:after {
  content:'';
  position: absolute;
  width: 50%;
  height: 5px;
  background-color: #333;
  left:0;
  bottom:0;
 }
 
 .ex1:after {
  transform: translateX(-100%);
 }
 
 .ex3:after {
  transform: translateX(200%);
 }
 
 .ex4 {
  overflow: hidden;
 }
 .ex4:after {
  transform: translateX(-100%);
 }
 
 .ex4.over:after {
  animation: animate-in 1s ease-in-out 1 normal forwards;
 }
 .ex4.out:after {
  animation: animate-out 1s ease-in-out 1 normal forwards;
 }
 
 @keyframes animate-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
    }
 }
 @keyframes animate-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
    }
 }
<div class="example ex1">Object State 1</div>
<div class="example ex2">Object State 2</div>
<div class="example ex3">Object State 3</div>
<div id="animate" class="example ex4">Full example (hover)</div>
...