我正在尝试<ul>使用CSS过渡进行滑动.
将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,
如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.
如果不使用JavaScript,我怎么能这样做呢？
#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
} …我正在尝试使用css为元素高度设置动画.我这样做的方式是,我为元素添加了一个触摸事件.该函数将a添加className到应该隐藏的元素,即获得高度为0.
问题是,当单击元素时,div假设高度为0暂停一秒,然后获得所需的高度.似乎动画持续时间越长,它在动画之前等待的时间就越长.
这是相关的代码:
transition: max-height 2s ease-in-out;
var heading = document.getElementById('heading'),
body = document.getElementById('body');
heading.addEventListener('click', hide);
body.addEventListener('transitionend', hideCallback);
function hide() {
body.className = 'hide';
}
function hideCallback(e) {
console.log(e.propertyName);
}#wrapper {
margin: auto;
background-color: blue;
width: 470px;
text-align: center;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
max-height: 400px;
max-width: 600px;
padding: 0;
}
#buttonContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: …