Question

我在单击时打开的元素上具有css过渡。但是，在声明doctype时，打开的元素上的过渡将停止工作。元素确实在打开之前等待过渡的持续时间，但是没有动画发生。由于某些原因，在本文中运行动画时，我无法使其正常工作。但是，当我在本地使用相同的代码并注释和取消注释文档类型并对其进行测试时，我确实遇到了问题。

var eventElements = document.getElementsByClassName("eventInfo");
for (var i = 0; i < eventElements.length; i++) {
  eventElements[i].onclick = function() {
    var number = this.getAttribute('number');
    var contentDivId = document.getElementById('eventContent_' + number);
    var eventIconId = document.getElementById('eventIcon_' + number);
    if (contentDivId.classList.contains('active')) {
      contentDivId.classList.remove("active");
    } else {
      contentDivId.classList.add("active");
    }
  };
}

#trackMessages {
  max-height: 480px;
}

.eventTracked {
  border-top: 1px solid black;
}

.eventTracked:hover {
  background-color: #adadad;
}

.eventInfo {
  cursor: pointer;
}

.eventName {
  color: black;
  line-height: 28px;
  margin-left: 5px;
  max-width: 95%;
  display: inline-block;
}

.eventContent {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0px 0px;
  font-family: Courier New, sans-serif;
  font-size: 14px;
  background-color: #CECECE;
  word-wrap: break-word;
  transition: max-height 0.35s ease-out;
}

.eventContent.active {
  max-height: 100%;
  transition: max-height 0.35s ease-in;
}

.eventType_sub_frame {
  background-color: #E1E1E1;
  color: #000000;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body style="width: 700px">
  <div class="header">
  </div>
  <div id="trackMessages">
    <div class="eventTracked eventType_sub_frame">
      <div class="eventInfo" number="0"><span class="eventName">test</span><span class="eventContentIcon active" id="eventIcon_0"></span></div>
      <div class="eventContent active" id="eventContent_0">
        <div class="eventContentMargin">
          <div>test</div>
          <div>test</div>
          <div>test</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

声明doctype时，CSS过渡停止工作

0 个答案: