Блог

Главная - Вопросы по программированию - Анимация ключевых кадров CSS из JS

Анимация ключевых кадров CSS из JS

#javascript #css #css-animations #keyframe

#javascript #css #css-анимация #ключевой кадр

Вопрос:

я хочу запустить анимацию на основе ключевых кадров css из javascript. После прочтения некоторых ответов на stackoverflow я попытался использовать функцию jquery addClass (нажмите на синюю фигуру, чтобы запустить анимацию): https://codepen.io/valentin-wei/pen/KKMRrYK

   With this approach i can only animate it once.

Есть ли способ последовательно анимировать эту фигуру взад и вперед с помощью javascript?

Ответ №1:

Решение, которое вы ищете javascript , — это либо разумное использование css-keyframes :

В вашем примере codepen replace everything inside you css with this code :

 test {
  background-color: blue;
  width:346px;
  height:213px;
    clip-path:  polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}

.animate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
}
.reverseanimate { 
  animation-duration: 3s;
  animation-name: animtest;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes animtest {
  0% {
    clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
  }
  100% {
    clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
  }
}

затем, replace everything inside you js with this code :

 let target = document.getElementById('test');
 setInterval(function(){  
 if ($(target).hasClass("animate")) {
    $(target).removeClass("animate");
    $(target).addClass("reverseanimate");
  }
  else {
    $(target).addClass("animate");
    $(target).removeClass("reverseanimate");
  }
 }, 3000);

ПРИМЕЧАНИЕ: по какой-то причине я не смог создать учетную запись в codepen

Комментарии:

1. Спасибо за ваш ответ, но, к сожалению, это решение не работает для меня. Событие «щелчок» было просто примером. Мне нужно иметь возможность полностью запускать анимацию и ее обратный аналог из javascript

2. Я также отредактировал свой ответ, на этот раз я использовал jQuery (не ванильный js), используя setIntervals() , вы также можете заменить его как полностью запущенную функцию вместо метода. не могу точно сказать, на какой ответ вы надеетесь

3. Это для вашего редактирования. Это почти то, что я ищу. Однако я не хочу, чтобы он постоянно анимировался. Он должен просто анимировать анимацию или reverseanimation (в зависимости от состояния анимации) только один раз при вызове. В вашем решении анимация никогда не останавливается, например, если я удаляю интервал (вероятно, из-за бесконечного количества анимаций-итераций). Я пытался разобраться с вашим предложением, изменив некоторые параметры или поместив его в событие щелчка, но я не смог получить желаемый результат. Я надеюсь, что это проясняет мой вопрос.

Ответ №2:

После некоторых дальнейших исследований я смог решить эту проблему.

Вместо использования свойства анимации css я теперь использую переход:

 .animate { 
   transition: clip-path 3s;
   clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)

}
.reverseanimate { 
   transition: clip-path 3s;
   clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}

Я также обновил свой codepen, чтобы предоставить рабочий пример: https://codepen.io/valentin-wei/pen/KKMRrYK