6

誰かが私が間違っていることを教えてくれて、私を正しい方向に向けてくれたら幸いです。この例を見てください。ご覧のとおり、ボタンがクリックされたときに「div2」を「div1」に移動しようとしています。実際には正常に機能し、2番目のdivは期待どおりに最初のdivに表示されますが、何らかの理由でクリックしてもCSSアニメーションがトリガーされず、2番目のdivにスライド効果が与えられます。

アニメーションは「div1」から削除されたときに実際に機能するため、「overflow：hidden」属性と関係があることに絞り込みましたが、おそらくご存知のとおり、2番目のdivを最初のdivに配置されている場合にのみ表示されます。

なぜアニメーションが機能しないのですか？

Chrome、OSXを使用しています。

前もって感謝します！

/クリストファー

4

2 に答える 2

18

あなたが困っているなら、彼はあなたを助けることができます：

http://jsfiddle.net/GLdQs/8/

.container {
    /* overflow: hidden; */
    clip: rect(auto, auto, auto, auto);
}

残念ながら、水平スクロールバーが表示されます。

于 2012-07-07T21:52:57.913 に答える
3

別のトリックはoverflow: hidden、アニメーション化された要素に移動することです。

http://jsfiddle.net/GLdQs/9/

#id1 {
    width: 0px;
    overflow: hidden;
}

#id1 > p {
    width: 500px; /* you probably want a fixed width for the content  */
}

@-webkit-keyframes slide {
  0%   { left: 500px; top: 0px; width:   0px; }
  100% { left:   0px; top: 0px; width: 500px; }
}

​
于 2012-07-07T22:59:16.967 に答える