タグ付けされた質問 「css-transitions」

以下のフィドルでは、可視性と不透明性を別々に切り替えています。後者は機能しますが、前者は機能しません。さらに、可視性の場合、遷移時間はホバーアウトの遅延として解釈されます。ChromeとFirefoxの両方で発生します。これはバグですか？ http://jsfiddle.net/0r218mdo/3/ ケース1： #inner{ visibility:hidden; transition:visibility 1000ms; } #outer:hover #inner{ visibility:visible; } ケース2： #inner1{ opacity:0; transition:opacity 1000ms; } #outer1:hover #inner1{ opacity:1; }

102 css  css-transitions 

CSSの移行が完了したときに通知（コールバックなど）を受け取ることはできますか？

100 javascript  css  css-transitions 

純粋なCSSで「フェードアウト」効果を実装しようとしています。これがフィドルです。私はオンラインでいくつかの解決策を調べましたが、オンラインでドキュメントを読んだ後、スライドアニメーションが機能しない理由を理解しようとしています。ポインタはありますか？ .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #00b953; } @keyframes …

96 css  css-transitions 

Webkitの移行終了イベントはwebkitTransitionEndと呼ばれ、FirefoxはtransitionEnd、オペラはoTransitionEndです。純粋なJSでそれらすべてに取り組む良い方法は何ですか？ブラウザをスニッフィングする必要がありますか？またはそれぞれを個別に実装しますか？私には思いつかなかった他の方法がありますか？ つまり： //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); または // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }

91 javascript  css  css-transitions  dom-events 

からテストのパフォーマンスへの移行を使用して、css3実験で6000個の小さなdiv要素を移動top: 0しtop: 145pxています。 ハードウェアアクセラレーションを使用しないと、 GoogleChromeでスムーズに実行されます。 ハードウェアを有効にするtranslateZ(0)と、パフォーマンスによるアクセラレーションがひどくなります。 どうしてこんなことに？ これが私のサンプルコードです：http：//dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html 更新（2014-11-13）：この質問はまだ注目を集めているので、最新のハードウェアで提供されているデモでは言及された吃音が表示されなくなったとしても、問題自体はまだ存在しているように見えることを指摘したいと思います。古いデバイスでもパフォーマンスの問題が発生する可能性があります。

82 css  css-transitions  hardware-acceleration 

css3遷移プロパティのレンダリング速度について質問があります。 いくつかの要素があるとします。 div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} 1つの宣言を使用して、これらすべての要素のすべての遷移をターゲットにする方がはるかに効率的div, span, a {transition: all}です。しかし、私の質問は、各要素の特定の遷移プロパティをターゲットにするアニメーションレンダリングの滑らかさと迅速さの点で「高速」でしょうか？例えば： div {margin: 2px; transition: margin .2s ease-in} span {opacity: .5; transition: opacity .2s ease-in} a {background-position: left top; …

82 performance  css  css-transitions 

CSSトランジションを使用して、CSS変換された状態間を遷移します（基本的には要素のスケールを遷移します）。要素が遷移しているとき、ページ上の残りのテキスト（Webkit内）は、遷移が完了するまでレンダリングをわずかに変更する傾向があることに気付きました。 フィドル： http //jsfiddle.net/russelluresti/UeNFK/ 私はまた、これが私のヘッダーでは発生しないことに気づきました。 -webkit-font-smoothing: antialiasedプロパティと値のペアました。したがって、テキストをデフォルトの外観（フォントスムージングの「自動」値）に維持し、遷移中にレンダリングを変更しない方法はありますか？ 「auto」値を使用するようにテキストを明示的に設定しようとしましたが、何もしません。font-smoothingを「none」に設定すると、トランジション中にレンダリングが点滅するのを防ぐことにも注意してください。 どんな助けでも大歓迎です。 編集1 私はOSXを使用していることに注意してください。ParallelsのChromeでのテストを見ると、2つの異なる段落の動作が異なることがわかりませんでした。したがって、これはMacに固有の問題である可能性があります。

81 css  webkit  css-transitions  css-transforms 

選択したdivを展開し、残りのスペース（幅が固定されている最初のものを除く）に合わせて均等にストレッチすることで他のdivを適切に動作させるスクリプトを（ここでユーザーの助けを借りて）コード化しました。 そして、これが私が達成したいことの写真です： そのために、フレックスとトランジションを使用します。 それはうまく機能しますが、jQueryスクリプトは「400％」のストレッチ値を指定します（これはテストに最適です）。 ここで、選択したdivを「400％」の固定値ではなく、コンテンツに正確に合わせて拡大/縮小したいと思います。 どうすればいいのかわかりません。 出来ますか ？ divを複製してコンテンツに適合させ、その値を取得し、この値を使用してトランジションを行おうとしましたが、これはパーセンテージでの初期幅ですが、ピクセルでのターゲット値であることを意味します。それはうまくいきません。 ピクセル値をパーセンテージに変換すると、何らかの理由で結果がコンテンツに正確に適合しません。 すべての場合において、これはとにかく私が欲しいものを達成するための少し複雑な方法のようです。 選択したdivのコンテンツに合わせるために移行できるflexプロパティはありませんか？ ここにコードがあります（より読みやすくするために編集/簡略化されています）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; } else …

9 javascript  jquery  css  flexbox  css-transitions