在这里查看 jsfiddle:
我试图让“点击我”按钮在第二次点击时向上滑动。第一次单击将框向下滑动,第二次将其向上滑动。有什么想法为什么不能按原样工作吗?
<div id="slider" class="slide">test</div>
.slide {
width:100px;
height:100px;
background:#ddd;
display:none;
-webkit-animation:cssSlideDown 1s ease 0 alternate;
}
@-webkit-keyframes cssSlideDown {
0% {height:0px;}
100% {height:100px;}
}
最佳答案
我认为在这种情况下您最好使用转换。
height: 0;
transition: height 1s ease;
overflow: hidden;
然后在JS中
if(!e.style.height || e.style.height == '0px') {
console.log('foo');
e.style.height = '100px';
}
else {
e.style.height = '0';
}
由于您似乎使用的是 jQuery,因此您可以使用 .css
来代替,这将为您节省大量代码。
关于html - CSS3 关键帧过渡替代点击问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17225893/