我想要一个 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);
});
最佳答案
使用关键帧可以避免第二次添加类 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);
});
关于javascript - 在一个 css 类中设置最大宽度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32262037/