代码之家 › 专栏 › 技术社区 › cubefox

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

web-deployment reactjs css html

cubefox · 技术社区 · 7 年前

2 回复 | 直到 7 年前

ValAsta 7 年前

使用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>

petraszd 7 年前

如果您只需要方框,那么canvas或SVG可能是一个答案:

但我猜想您需要为实际的DOM元素设置动画。在这种情况下,需要搁置解决问题的方法。您需要有一个稳定的DOM树,然后需要以渐进的方式更改DOM元素的样式。

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

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

我都添加了转换示例。我使用vanilla 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>

推荐文章

Costin · ASP。NET核心和角度部署-页面刷新给出404错误

4 年前

Kotikigor · Cookie无法工作[关闭]

8 年前

yrv16 · 部署项目和编译资产的正确方法

8 年前

Infinito · Java web应用程序部署Heroku

8 年前

user4092086 · 尝试部署时,Openshift失败并停止构建节点js应用程序

8 年前

Travis Su · 将VueJS应用程序部署到Firebase后,页面为空

8 年前

Neelanjana Nayar · 如何在Apache Tomcat服务器中部署IntelliJ IDEA项目?

8 年前

Andrew · “您没有查看此目录或页面的权限。”仅在Azure上切换到生产后出错

8 年前

naila naseem · 应用程序在部署spring boot和角度错误代码H10 heroku时崩溃

8 年前

Shalem · 如何发布。Net解决方案,包含通过Visual Studio到Azure的多个项目

8 年前