Question

我正在使用宽度为0的js创建一个html元素我想把它转移到不同的宽度

这将显示转换（显然无法使用）

element.style.transition = "all 0.4s ease";
element.style.width = 0;
alert(123);
element.style.width = 100;

这也可行

element.style.width = 0;
setTimeout(open, 1, element); //having the width=100 in the function

这不起作用

element.style.width = 0;
element.style.width = 100;

如果有一些我可以听的事件，我想知道什么在其触发器上我可以应用新大小并且转换是可见的

settimeout基本上正在做我想要的但我现在更愿意，如果有事件或不同的方式来做到这一点

P.S对Jquery或任何类型的扩展不感兴趣

编辑 - ＆gt;

这里有更多代码

x: function(){
    document.addEventListener("mousemove", y);

},
y: function(){
  t = document.getElementById("body");  
  d = document.createElement('div');
  d.style.height = 100;
  d.style.width = 100;
  d.style.background ="#f00"
  d.style.position = "absolute";
  d.style.left = Math.floor(Math.random() * 1000);;
  d.style.top = Math.floor(Math.random() * 1000);;
  d.style.transition = "all 5s ease";
  t.appendChild(d);
  setTimeout(z, 100, d);

},
z: function(d){
  d.style.background ="#00f";  
}

将超时设置为100接缝工作将其设置为10并且它错过了一些设置为1并且几乎每个都错过了所以我的结论是，如果我将计时器设置为1，它会在＆＃34;之前应用新颜色＆＃34;已经发生了，并没有过渡，但它的蓝色所以我正在寻找这个＆＃34;东西＆＃34; 像addeventlistener（＆＃34; objectcreatedandcanbetransitioned＆＃34;）那么如何做上面的白色OUT定时器并通过创建一个对象并在创建下一个时开始转换

Answer 1

如果我理解你的问题，你想等到加载DOM内容，那么a related answer关于如何在没有jQuery的情况下处理文档就绪是Using Action Constraints。这意味着您在DOM加载（宽度为0px）后开始转换，并立即将其设置为100px。

＆＃13;

var element = document.getElementById("element");
element.style.transition = "all 0.4s ease"
element.style.width = "0px";
var toggle = document.getElementById("toggle");
var toggleFunc = function() {
  if (element.style.width === "0px") {
    element.style.width = "100px";
  } else {
    element.style.width = "0px";
  }
};
toggle.addEventListener("click", toggleFunc);
document.addEventListener('DOMContentLoaded', toggleFunc, false);

＆＃13;

.box {
  background-color: blue;
  height: 100px;
}

＆＃13;

<button id="toggle">
  Toggle
</button>
<div id="element" class="box" />

＆＃13;

Answer 2

事件列表为here

在下面的代码中，我将宽度设置为零。然后我有一个改变宽度的功能。我在myBtn上为click事件设置了一个事件监听器，但它可以是上面列表中的任何事件。第二个参数是事件发生时调用的函数，即callbackFunc()，我将宽度更改为100。

<!DOCTYPE html>
<html>
<body>

<div id="element">My Header</div>

<p>Click the button to see the width change.</p>

<button id="myBtn">Try it</button>



<script>

document.getElementById("myBtn").addEventListener("click", callbackFunc);

var element = document.getElementById("element")
element.style.width = "0px";
element.style.overflow = "hidden";

function callbackFunc() {
   
   element.style.backgroundColor = "blue";
   element.style.width = "100px";
element.style.transition = "all 2s";


element.style.width = "100px";
}
</script>

</body>
</html>

你也可能需要隐藏溢出

使用js创建元素并添加转换

2 个答案: