HTML：

<body>
    Click multiple times on this button:
    <br />
    <input type="button" value="Display one more div" />
    <div id="div_container"></div>
</body>

CSS：

div#div_container {
  position: relative;
}

.log {
    position: relative;
    display: inline-block;
    margin-right: 50%;
    opacity: 1;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.hidden {
  opacity: 0;
}

Javascript：

// Event listener
var button = document.getElementsByTagName("input")[0];
button.addEventListener ('click', oneMore);

// Spawn a div
function oneMore() {
    var div = document.getElementById("div_container");
  div.innerHTML += "<div class=log>Hello, I will soon disappear</div>";
  clear ();
}

// Clear every div except the last
function clear () {
    var logs = document.getElementsByClassName("log");
    for (x=0; x<(logs.length-1); x++) {
        var classes = logs[x].className.split(" ");
        // Only thoses not already cleared
        if (classes.length == 1) {
            logs[x].className += (" waiting");
            (function (x) {
                window.setTimeout ( function () {
                    logs[x].className += (" hidden");
                    logs[x].addEventListener("transitionend", function () { logs[x].style.display = "none" });
                    logs[x].addEventListener("webkitTransitionend", function () { logs[x].style.display = "none" });
                }, 500);
            })(x);
        }
    }
}

所以剩下的div会上升到顶部，但是我会希望它顺利翻译。

有没有人知道如何使用CSS和纯JavaScript进行此操作？

Answer 1

如果您能够将display更改为block，则可以转换height，margin和padding，以便他们隐藏没有占用空间。然后你不需要做结尾display:none这就是造成突然混蛋的原因。

你也使用.innerHTML+=这是效率低下的，会导致所有元素被重新创建和渲染，并且还会使你不得不继续添加clear中的类。

相反，您可以创建一个实际元素，设置所有适当的属性（class，innerText等），然后appendChild。通过这种方式，您可以保留您可能希望在其上添加的类和事件侦听器，而无需不断重新添加它们。

＆＃13;

// Event listener
var button = document.getElementsByTagName("input")[0];
button.addEventListener ('click', oneMore);

// Spawn a div
function oneMore() {
  var div = document.getElementById("div_container");
  var newDiv = document.createElement("div");
  newDiv.classList.add("log");
  newDiv.innerText = "Hello, I will soon disappear";
  div.appendChild(newDiv);
  if(newDiv.previousElementSibling){
    newDiv.previousElementSibling.classList.add("hidden");
  }
}

＆＃13;

div#div_container {
  position: relative;
}

.log {
    position: relative;
    display: block;
    white-space: nowrap;
    margin: 5px;
    margin-right: 50%;
    padding: 1px 10px;
    border-radius: 20px;
    opacity: 1;
    background: rgba(250,0,0,0.7);
    color: #fff;
    width:190px;
    height:20px;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.hidden {
  opacity: 0;
  height:0px;
  margin-top:0px;
  margin-bottom:0px;
  padding-top:0px;
  padding-bottom:0px;
}

＆＃13;

Click multiple times on this button:
<br />
<input type="button" value="Display one more div" />
<div id="div_container"></div>

＆＃13;

隐藏内联块有点困难，因为即使你输出所有其他样式属性，如高度，边距，填充等，该元素仍然会影响其他元素的位置，直到{ {1}}设置为display。您可以做一些技巧，例如在隐藏它之前将显示设置为阻塞，然后转换前面提到的样式，但这可能会再次影响其他元素的位置。显示设置为阻止时的含义，它将在转换之前将以下元素向下推。

您可以使用其他技巧，但它们需要额外的工作，可能会影响您希望布局的方式。

如何让div顺利移动？

HTML：

CSS：

Javascript：

1 个答案: