主页 / 问题 / 781057
Accepted
Виталик Черный
Asked:2020-02-06 20:04:26 +0000 UTC2020-02-06 20:04:26 +0000 UTC

无尽的动画

  • 772

如何在纯JS中制作无限动画？

正方形必须将其大小从指定值更改为 0，反之亦然。

var firstElem = document.getElementById("elemFirst");

function getSizeFirst(elem) {
  var i = getComputedStyle(elem).height.slice(0, -2);

  function changeSize() {
    if (i > 0) {
      --i;
      elem.style.height = i + "px";
      setTimeout(function() {
        changeSize();
      }, 0)
    } else {
      return 0;
    }
  }
	
	changeSize();
}

getSizeFirst(firstElem);
#elemFirst {
  width: 50px;
  height: 50px;
  background: #223;
}
<div id="elemFirst"></div>

javascript

2 个回答

  1. 使用 css：

    div {
  width: 50px;
  height: 50px;
  background: #223;
  animation: size-anim 3s linear infinite;
}

@keyframes size-anim {
    0%   {   width:  0  ;   height:  0  ;   }
   50%   {   width: 50px;   height: 50px;   }
  100%   {   width:  0  ;   height:  0  ;   }
}
    <div></div>

    • 1
  2. Best Answer

    像这样

    var firstElem = document.getElementById("elemFirst");

function getSizeFirst(elem) {
  var i = getComputedStyle(elem).height.slice(0, -2);
  
  function sSize() {
    if(i > 0) {
      --i;
      elem.style.height = i + "px";
      setTimeout(function() {
        sSize();
      }, 0)
    } else {
      mSize();
    }
  }
  function mSize() {
    if(i < 50) {
      ++i;
      elem.style.height = i + "px";
      setTimeout(function() {
        mSize();
      }, 0)
    } else {
      sSize();
    }
  }
	
	sSize();
}

getSizeFirst(firstElem);
    #elemFirst {
  width: 50px;
  height: 50px;
  background: #223;
}
    <div id="elemFirst"></div>

    • 1

相关问题