CSS3关键帧过渡交替onclick问题

【问题标题】：CSS3 Keyframe transition alternate onclick issueCSS3关键帧过渡交替onclick问题
【发布时间】：2013-06-21 08:26:26
【问题描述】：

在此处查看 jsfiddle：

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;}
}

【问题讨论】：

标签： html css animation transitions

【解决方案1】：

我认为在这种情况下你最好使用 transitions。

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 代替，这将为您节省大量代码。

http://jsfiddle.net/ExplosionPIlls/9sRE8/2/

【讨论】：