在一个 CSS 类中为最大宽度设置动画答案

【问题标题】：animate max-width in one css class在一个 CSS 类中为最大宽度设置动画
【发布时间】：2015-11-22 13:59:57
【问题描述】：

我想要一个 CSS 类，当一个元素被添加到 document.body 时，它会与 max-width 一起动画

目前我知道如何使用两个课程并在之后添加第二个课程。但是我需要在页面中添加很多元素，而且使用一个类会更简洁。

我想将其转换为使用一个类：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);
});

【问题讨论】：

你的意思是：最大宽度？
@PedroAffonso，是的，我很抱歉。我进行了一些编辑，将其从高度更改为宽度。

标签： javascript html css animation css-transitions

【解决方案1】：

使用关键帧可以避免第二次添加类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);
 });

【讨论】：

使用关键帧是可行的方法，因为它只需要一个类用于“出现滑入”动画。请更新您的答案（基于第二个链接）并将其标记为正确。感谢您的及时回复！
看起来不错。不需要 setTimeout。你可以直接在ready方法中添加newDiv.className = 'my-stuff';。
严格来说，如果你的 JS 在你的 HTML 笔更新 BTW 之后加载，你甚至不需要 ready 方法

【解决方案2】：

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

div {
    max-width: 0; 
}

【讨论】：

我同意，这就是为什么我希望有一种方法可以只为该项目提供一个类。请参阅@sajs 答案。效果很好。