动画最大宽度在一个 css class

Question

我想要一个 CSS class，当一个元素被添加到 document.body 时，它会随着 max-width

动画化

目前我知道如何使用两个 class 并在其后添加第二个 class。但是我需要向页面添加很多元素，使用一个 class.

会更简洁

我想将其转换为使用一个 class：http://codepen.io/hellomihai/pen/yYBPjW

css:

.hide-me {
  overflow: hidden;
  max-width: 0;
}

.show-me {
  max-width: 1000px;
  transition: max-width 5s;
}

.my-stuff {
  height: 200px;
  width: 600px;
  background-color: red;
}

html:

$(document).ready(function() {
  var newDiv = document.createElement("div");
  document.body.appendChild(newDiv);
  newDiv.className = 'my-stuff hide-me';
  setTimeout(function() {
    $('.my-stuff').addClass('show-me');
  }, 1);
});

Answer 1

除了默认隐藏每个 div 并使用类控制它们的外观外，确实没有办法解决这个问题。我不建议这样做，因为这会导致非动画元素的工作量增加。

div {
    max-width: 0; 
}

Answer 2

使用关键帧可以避免第二次添加 class like so!

.my-stuff {
  width: 600px;
  height: 200px;
  background-color: red;
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
    animation-name: example;
   animation-duration: 4s;
}

@-webkit-keyframes example {
  from {
   width: 0;
  }
  to {
   width: 600px;
  }
}

keyframes example {
  from {
   width: 0;
  }
  to {
   width: 600px;
  }
}

$(document).ready(function() {
  var newDiv = document.createElement("div");
   document.body.appendChild(newDiv);

   // want to not use a setTimeout to add a class after
   setTimeout(function() {
        newDiv.className = 'my-stuff';
  }, 1);
 });

动画最大宽度在一个 css class

animate max-width in one css class

html

javascript

css

animation

css-transitions