Question

我想制作一个动画，将如图1所示的框分成图2所示的框。

我尝试了一些基本的库（例如animate.css），但是没有一个库提供的动画足够先进，可以完成类似的事情。我该如何完成类似的工作？我应该使用一个库还是它足够简单以至于无法在普通js中完成？

Answer 1

使用javascript。接受元素并创建函数以更改特定元素的边界我建议根据需要使用功能启动。我只是在写剧本和正文。不好意思，抱歉。我是这个社区的新手。例如-

<script>

function ani()
{var x = document.getElementById("whatever").style.border = "none";
 var y = document.getElementsByClassName("need");
 var n= y.length;

 for(i=0;i<n;i++)
  {y[i].style.border="solid";}}


 function nani()
{var x = document.getElementById("whatever").style.border = "solid";
 var y = document.getElementsByClassName("need");
 var n= y.length;

 for(i=0;i<n;i++)
  {y[i].style.border="none";}}

</script>
<body>
 <ul id="whatever" onmouseenter="ani()" onmouseleave="nani()"> chacha
  <li class="need">1</li>
   <li class="need">2</li>
   <li class="need">30</li>
 </ul>
</body>

Answer 2

这真的取决于您需要哪种动画？以及您打算在动画之前和之后如何处理这些块。

如果只需要盒子，那么画布或SVG可能是答案：

但是我猜测您需要为实际的DOM元素设置动画。在那种情况下，解决该问题的方法就很必要。您需要具有稳定的DOM树，并且需要逐步更改DOM元素的样式。

有三种方法可以做到这一点：

使用纯JavaScript并自己每秒至少更新25次domElem.style.* attributes。
使用CSS3 Animations
或使用CSS3 transitions

我都添加了过渡示例。我正在使用香草js触发动画（通过更改domElem.className）。但这可以使用React或其他方法轻松完成。

示例：

function main() {
  setTimeout(startAnimation, 500);
}

function startAnimation() {
  for (var i = 0; i < 2; ++i) {
    var split = document.getElementById("split-" + i);
    split.className = "state-end";
  }
}

body {
  background-color: #333;
}

#main {
  width: 400px;
  margin: 20px auto 40px auto;
  border: 1px solid #fff;
}

#split-0,
#split-1,
#rect-0,
#rect-1,
#rect-2 {
  width: 400px;
  background-color: #333;
  box-sizing: border-box;
}

#rect-0 {
  height: 50px;
}

#rect-1 {
  height: 50px;
}

#rect-2 {
  height: 240px;
}

#split-0,
#split-1 {
  margin-left: -1px;
  margin-right: -1px;
  width: 402px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;

  transition: opacity 0.4s, height 1.0s ease-in, margin 1.0s ease-out;
}

#split-0.state-init,
#split-1.state-init {
  height: 1px;
  margin-top: 29px;
  opacity: 0;
}

#split-0.state-end,
#split-1.state-end {
  height: 30px;
  margin-top: 1px;
  margin-bottom: 0px;
  opacity: 1;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body onload="main()">
    <div id="main">
      <div id="rect-0" class="state-init"></div>
      <div id="split-0" class="state-init"></div>
      <div id="rect-1" class="state-init"></div>
      <div id="split-1" class="state-init"></div>
      <div id="rect-2" class="state-init"></div>
    </div>
  </body>
</html>

如何使用react为形状变换设置动画

2 个答案: