Css transition stops working when doctype is declared

Question

I have a css transition on an element that opens when you click it. But the transition on the element that opens stops working when the doctype is declared. The element does wait the duration of the transition before opening but no animation happens. For some reason i can't get the animation to work when its run in this post. But when i use the same code locally and comment and uncomment the doctype and test it i do run into the problem.

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>

The missing ! was a typo when i copied it over here. I do have the ! in the original code. — InstaPoppy, Jan 21 '19 at 09:35
I can't recommend using non-standard attributes such as `number`. They may cause all kinds of problems later. Use `data-number` instead. — Mr Lister, Jan 21 '19 at 09:44
Probably because `max-height: 100%;` only does what you expect it to in quirks mode. In strict mode this won’t work, because the parent element does not have an explicit height, so there is nothing to base a max-height in percentage on. — misorude, Jan 21 '19 at 09:49

Css transition stops working when doctype is declared

0 Answers0