Как мне запустить этот кусок для CSS-кода через JavaScript - PullRequest
Новая
       7

Как мне запустить этот кусок для CSS-кода через JavaScript

0 голосов
/ 18 марта 2019

Спасибо, что нашли время, чтобы разобраться в этом, и любая помощь в этом отношении приветствуется.

У меня есть следующий фрагмент кода. 

.middle_n.expand.remove
{
 animation: contractm 0.3s forwards;
 transform-origin: 0 75px;
 height:200%;
 animation-delay: 1.3s;
}

@keyframes contractm 
{
 0%{}
 100%{transform:translate(147.8%,100%) rotate(-16.75deg);}
}

Я хочу передать динамическое значение для поворота в контракте через JavaScript.Как я это сделал.Может ли многоступенчатая анимация проходить через javascript?

Еще раз спасибо.

1 Ответ

1 голос
/ 18 марта 2019

По моему мнению, если вы хотите управлять своей анимацией, а не просто анимировать ее, я рекомендую вам использовать js для управления стилем вашего элемента.Поскольку animation должен завершить серию анимации.

И есть действительно мощная переменная css, называемая переменной css, вы можете получить более подробную информацию о https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties.

const rotate=document.getElementById("rotate")
let r=0
rotate.addEventListener("click",()=>{
  r += 10
  rotate.style.setProperty("--rotate", r+"deg");
})
#rotate{
  --rotate:0deg;
  background:pink;
  width:100px;
  height:100px;
  transform:rotate(var(--rotate));
  transition:transform 1s;
}
<p>click the square and then it will rotate.</p>
<div id="rotate"></div>

Конечно, если вы хотите серию анимаций, вы можете проверить это на https://developer.mozilla.org/en-US/docs/Web/CSS/animation. В анимации легко настроить шаги.

...