在一个CSS类中设置动画最大宽度 [英] animate max-width in one css class

问题描述

我想要一个CSS类，当将元素添加到 document.body 时，它将以最大宽度

I would like one CSS class that when an element is added to the document.body it would animate in with max-width

目前，我知道如何使用两个类并在其后添加第二个类。但是我需要在页面上添加许多元素，使用一个类来完成它会更清洁。

currently I know how to do it with two classes and adding the second class after. But I need to add many elements to the page and it would be much cleaner to do it with one class.

Id希望将其转换为使用一个类： http://codepen.io/hellomihai/pen/yYBPjW

Id like to convert this to use one 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);
});

推荐答案

使用关键帧可以避免第二次添加类像这样！

Using keyframes you can avoid adding the class the second time 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类中设置动画最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！