Question

我想运行一个在框宽达到某个像素时运行的函数，比方说80px。让我说我想提醒“hello”和console.log“嘿”。我怎么能做到这一点？而且我不能使用jQuery，所以请使用vanilla Javascript。

编辑：我想知道我是否可以在redbox.style.width == "80px"时插入类似于运行警报或控制台日志的功能？

const redbox = document.querySelector("#redbox");
const coolbutton = document.querySelector("#coolbutton");

coolbutton.addEventListener("click", animator);
function animator() {
  if (redbox.style.width == "50px") {
   redbox.style.width = "100px";
   redbox.style.transition = "2s";
  } 
  else {
   redbox.style.width = "50px";
   redbox.style.transition = "2s";
  }
}

#redbox {
  background: red;
  height: 50px;
  width: 50px;
}

<div id="redbox"></div>
<button id="coolbutton">click</button>

Answer 1

总而言之，在动画过渡期间没有事件处理程序（本机）。但是one for transition end可以在你的代码中原生使用，但是因为你想在中间抓住它的宽度而没有jquery，这会让事情变得复杂。

我对request animation frame几乎没有经验，但是现在，在修改了一些代码之后，这里有一个结构，它使用了一个老式的setinterval计时器，可以让你开始做你想做的事。

@Scheduled(cron = "#{getCronSyntax}")
private void cronSchedule() {
     LOGGER.info("The time is now {}", dateFormat.format(new Date()));
}

小提琴手：https://jsfiddle.net/2mkxx6f0/4/

Answer 2

请检查代码不是80％，而是>80px

var redbox = document.querySelector("#redbox");
var coolbutton = document.querySelector("#coolbutton");
coolbutton.addEventListener("click", animator);
function animator() {
var a= Number("50");// increasing by 50 px
var b=Number(redbox.style.width.slice(0, -2));

  if (b <= 80) {
  var c=b+a+"px";
  
   redbox.style.width =c; 
   redbox.style.transition = "2s";
  } 
  else {
   alert("hii")
  }
}

#redbox {
  background: red;
  height: 50px;
  width: 50px;
}

<body>
<div id="redbox"></div>
<button id="coolbutton">click</button>
</body>

当div的高度达到某个像素时，在javascript中调用函数

2 个答案: