在一个CSS类中设置动画最大宽度 [英] animate max-width in one css class
本文介绍了在一个CSS类中设置动画最大宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想要一个CSS类,当将元素添加到 document.body
时,它将以最大宽度$进行动画处理c $ c>
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屋!
查看全文