html - CSS3 キーフレーム トランジションの代替 onclick の問題

Question

ここでjsfiddleを参照してください：

jsfiddle

2回目のクリックで「Click Me」ボタンを上にスライドさせようとしています。1 回目のクリックでボックスが下にスライドし、2 回目のクリックで上にスライドします。これがそのまま機能しない理由はありますか？

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

Answer 1

この場合、トランジションを使用したほうがよいと思います。

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/