私は：の初期css値を持つ要素をロードしています：
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
transition: all 2s ease-in-out;
transform: scale(0,0);
}
要素がページに読み込まれ、遷移を確認したら、scale（1、1）に変更する必要があります。誰でも助けることができますか？
transitionそれはあなたの状況での理想的なソリューションではありませんので、ページをロードする瞬間が適用されます、あなたが必要となることはCSSで@keyframes設定が必要なscale(0,0)のclassと、その後scale(1,1)のため100%として、キーフレームは、ページが完全にロードされた後に撮影されます。
デモ （コードを少しリファクタリングし、rev 2を使用しanimation-fill-modeてポップアップが縮小されないように追加しました0）
.popOver {
height: 100%;
width: 100%;
position: fixed;
background-color: #d9dfe5;
-webkit-animation: bummer 2s;
animation: bummer 2s;
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* Add this so that your modal doesn't
close after the animation completes */
}
@-webkit-keyframes bummer {
100% {
-webkit-transform: scale(1,1);
}
}
@keyframes bummer {
100% {
transform: scale(1,1);
}
}
ここで前に説明したように、要素の初期スケールをキーフレーム0,0を1,1使用するようにアニメーション化するよりも設定しています。アニメーションの時間は、2秒に2s過ぎない微調整によって制御できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加