ディスプレイを使用して、これを期待どおりの自然な方法で機能させることができますが、JavaScriptを使用するか、他のタグが別のタグ内にある巧妙なトリックを提案しているため、ブラウザーをスロットルして機能させる必要があります。内部タグはCSSと寸法をさらに複雑にするので、気にしません。JavaScriptソリューションは次のとおりです。
https://jsfiddle.net/b9chris/hweyecu4/17/
次のようなボックスから始めます。
<div id="box" class="hidden">Lorem</div>
隠しボックス。
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
関連するq / aにあるトリックを使用して、offsetHeightをチェックし、ブラウザーを瞬時にスロットルします。
https://stackoverflow.com/a/16575811/176877
まず、上記のトリックを形式化したライブラリ：
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
次に、それを使用してボックスを表示し、フェードインします。
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
これにより、ボックスがフェードインおよびフェードアウトします。したがって、.noTrnsn()遷移をオフhiddenにしてdisplayから、クラスを削除noneしますblock。これにより、デフォルトからに戻ります。次に、不透明度を0に設定してフェードインの準備をします。ステージを設定したので、を使用してトランジションをオンに戻し.resumeTrnsn()ます。最後に、不透明度を1に設定してトランジションを開始します。
ライブラリがなければ、表示の変更と不透明度の変更の両方で、望ましくない結果が生じることになります。ライブラリの呼び出しを削除しただけでは、遷移はまったく発生しません。
上記では、フェードアウトアニメーションの最後に表示を再びなしに設定しないことに注意してください。でももっと凝ったものにできます。フェードインして高さが0から大きくなるものを使用してみましょう。
ファンシー！
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
高さと不透明度の両方を移行しています。高さを設定していないことに注意してください。つまり、高さがデフォルトですauto。通常、これは遷移できません。autoからピクセル値（0など）に移動しても、遷移はありません。これをライブラリともう1つのライブラリメソッドで回避します。
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
これは、jQuery 3.xで除外されているアニメーションフレームワークを必要とせずに、jQueryの既存のfx / animationキューに参加できる便利なメソッドです。jQueryがどのように機能するかを説明するつもりはありませんが.queue()、.stop()、jQueryが提供する配管は、アニメーションが互いに干渉するのを防ぐのに役立ちます。
スライドダウン効果をアニメーション化してみましょう。
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
このコードは#box、クラスをチェックすることで、チェックされ、現在非表示になっているかどうかを確認することから始まります。しかし、スライドアウト/フェードアニメーションの最後にクラスをwait()追加することにより、ライブラリコールを使用してより多くのことを実現hiddenします。これは、実際に非表示になっている場合に見つかるはずです。上の単純な例ではできません。これにより、要素を繰り返し表示/非表示にすることもできます。これは、非表示のクラスが復元されなかったため、前の例のバグでした。
また、呼び出し前に.noTrnsn()最終的な高さを測定するなど、測定を行うなど、アニメーションのステージを設定するために呼び出されたCSSとクラスの変更を確認することもでき#boxます。.resumeTrnsn()、をや、その完全なセットからアニメーション化することなどが含まれます。目標のCSS値にステージングします。
古い答え
https://jsfiddle.net/b9chris/hweyecu4/1/
あなたはクリックでそれを移行させることができます：
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
CSSはあなたが推測するものです：
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
キーは、表示プロパティを調整することです。隠されたクラスを削除してから、50ミリ秒を待っていることで、その後追加されたクラスを経由して移行を開始し、我々はそれがただのアニメーションせずに画面上にブリッピングの代わりに、それが表示されるように取得し、我々が望んでいたように、次に展開します。アニメーションが終了するまで待ってから非表示を適用することを除いて、同じことが他の方法でも起こります。
注：競合状態.animate(maxWidth)を回避するためにここで悪用していsetTimeoutます。setTimeout自分や他の誰かが気づかないコードを見つけたときに、隠れたバグをすばやく導入します。.animate()で簡単に殺すことができます.stop()。これを使用して、標準のfxキューに50ミリ秒または2000ミリ秒の遅延を設定しているだけで、この上に構築している他のコーダーが簡単に検索/解決できます。