我想用@keyframes 将 animation 添加到 div 中。我基本上已经尝试了我所知道的一切

Question

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;}'
var moveUp = document.querySelectorAll('.moveUp')
document.getElementsByTagName('head')[0].appendChild(style)

//HTML

 <body>
    <div class="moveUp"></div>
    <script src="script.js"></script>
  </body>

我希望 div 向下移动 200px 他们再次出现

Answer 1

您可以将 style.innerHTML 更改为以下内容：

style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}'

为了更容易阅读：

.moveUp {
  background-color: red; 
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 3em;
  animation: moveDown 1s;
}

@keyframes moveDown {
  50% {
    transform: translateY(200px);
  }
  100%{
    transform: translateY(0);
  }
}

 var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}' var moveUp = document.querySelectorAll('.moveUp') document.getElementsByTagName('head')[0].appendChild(style)

 <div class="moveUp"></div>

我想用@keyframes 将 animation 添加到 div 中。我基本上已经尝试了我所知道的一切

问题描述

1 个解决方案

解决方案1
1 2022-07-24 14:05:58

我想用@keyframes 将 animation 添加到 div 中。 我基本上已经尝试了我所知道的一切

问题描述

1 个解决方案

解决方案1 1 2022-07-24 14:05:58

我想用@keyframes 将 animation 添加到 div 中。我基本上已经尝试了我所知道的一切

解决方案1
1 2022-07-24 14:05:58