ホームページ > 記事 > ウェブフロントエンド > CSS3で複数の要素を連続して表示するエフェクトを実装する方法について
CSS3で複数の要素を連続して表示するエフェクトを実装する方法について
- 小云云オリジナル
- 2017-12-18 11:32:412847ブラウズ
CSS3 は CSS のアップグレード版です。CSS3 では、キーフレームと組み合わせたアニメーションを使用して要素にさまざまなアニメーション効果を追加します。この記事では、複数要素の連続表示を実現するための CSS3 の効果を中心に紹介しますので、必要な方は参考にしていただければ幸いです。
上の図に示すように、このようなアニメーション効果は多くのイベントプロモーションのHTML5でよく使用されます。特に年末が近づいているので、企業のイベントページの作成に忙しい学生もいるかもしれません。このような小さなスキルを身につけると役立つかもしれません。
CSS3 では、キーフレームと組み合わせたアニメーションを使用して、要素にさまざまなアニメーション効果を追加します。特定のアニメーションはキーフレームで定義され、アニメーションで使用されます。たとえば、上から飛んでくるアニメーション効果を定義できます。
@keyframes topIn {
from { transform: translateY(-50px) }
to { transform: translateY(0px) }
}
そして、ターゲット要素のアニメーションを通じてアニメーションを使用します。
<p class="target topIn"></p>
.topIn {
animation: topIn 1s ease;
}
このようにして、要素が最初に DOM にレンダリングされるときに、上から下への移動アニメーション効果が発生します。もちろん、この効果は私たちが望むものではありません。多くの場合、アニメーションに 0 から 1 の透明度のグラデーションも追加します。
@keyframes topIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
要素の表示タイミングも制御できるようにしたいのですがどうすればよいでしょうか？より簡単な方法は、アニメーション効果が必要な場合にのみアニメーションを制御するクラス スタイルをターゲット要素に追加することです。
btn.addEventListener('click', function() {
document.querySelector('.target').classList.add('topIn');
}, !1);
しかし、これには問題があります。これを実践した友人はすでに気づいていると思います。要素はシーンに入る前には非表示の状態であることが期待されます。しかし、上記の操作を行うだけで、アニメーションが開始される前に要素が表示されます。それで、何をすべきでしょうか？
display: none または Visibility: hidden を要素に追加することは簡単に考えられます。ただし、display: none の後は、要素はスペースを占有しません。この場合、ページ レイアウトに混乱が生じます。したがって、開始する前に、要素に新しいクラスを追加します。
.aninode {
visibility: hidden;
}
そして、要素を表示する新しいクラスを追加します。
.animated .aninode {
visibility: visible;
}
アニメーション効果を制御するクラスも CSS でいくつかの調整が必要です。
.animated .topIn {
animation: topIn 1s ease;
}
この利点は、クラスにアニメーションを追加するだけで効果を実現できることです。サンプルデモの完全なコードは次のとおりです:
<p class="container">
<p class="target aninode leftIn"></p>
<button class="btn show">show</button>
<button class="btn hide">hide</button>
</p>
.container {
width: 100px;
margin: 0 auto;
}
.aninode {
visibility: hidden;
}
.animated .aninode {
visibility: visible;
}
.target {
width: 100px;
height: 100px;
background: orange;
border-radius: 4px;
margin: 20px 0;
}
.animated .topIn {
animation: topIn 1s ease;
}
.animated .leftIn {
animation: leftIn 1s ease;
}
.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
outline: none;
transition: 0.1s;
}
.btn:active {
border: none;
background: orange;
color: #fff;
}
@keyframes topIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes leftIn {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
container.classList.remove('animated');
}, !1);
デモは次のように表示されます:
See the Pen <a href='https://codepen.io/yangbo5207/pen/NXKrPg/'>NXKrPg</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.
codepenデモアドレス
しかし、これは私たちが望む効果には少し足りないようです。考え続ける。まず、次の要素を前の要素よりも遅く表示したい場合は、遅延時間を制御する必要があります。遅延時間を設定するクラスを多数用意する必要があります。
.delay200 {
animation-delay: 200ms;
animation-fill-mode: backwards!important;
}
.delay400 {
animation-delay: 400ms;
animation-fill-mode: backwards!important;
}
.delay600 {
animation-delay: 600ms;
animation-fill-mode: backwards!important;
}
.delay800 {
animation-delay: 800ms;
animation-fill-mode: backwards!important;
}
animation-fill-mode:backwards! important; 目的は、要素が表示される前に要素の透明度を 0 に保つことです。アニメーションを追加した直後に要素が表示されないようにします。
新しいクラスでアニメーションの省略形を使用するときに、animation-fill-mode プロパティが上書きされないように ! important を追加しました。ここに! important が書かれていない場合、topIn などのアニメーションクラスでは省略形を使用できません。
この後、必要な効果を実現するには、上記のコードを CSS に追加し、HTML にいくつかの変更を加えるだけです。
See the Pen <a href='https://codepen.io/yangbo5207/pen/mpbEEE/'>mpbEEE</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>CodePen</a>.
codepenデモアドレス
完全なコードは次のとおりです:
<p class="container">
<p class="targets aninode">
<p class="item leftIn">春晓</p>
<p class="item leftIn delay200">春眠不觉晓</p>
<p class="item leftIn delay400">处处蚊子咬</p>
<p class="item leftIn delay600">夜来风雨声</p>
<p class="item leftIn delay800"><此处请留下你们的才华></p>
</p>
<button class="btn show">show</button>
<button class="btn hide">hide</button>
</p>
.container {
width: 200px;
margin: 0 auto;
}
.aninode {
visibility: hidden;
}
.animated .aninode {
visibility: visible;
}
.targets {
margin: 20px 0;
}
.targets .item {
border: 1px solid #ccc;
margin: 10px 0;
line-height: 2;
padding: 2px 6px;
border-radius: 4px;
}
.animated .topIn {
animation: topIn 1s ease;
}
.animated .leftIn {
animation-name: leftIn;
animation-duration: 1s;
}
.btn {
width: 100px;
height: 30px;
border: 1px solid #ccc;
outline: none;
transition: 0.1s;
}
.btn:active {
border: none;
background: orange;
color: #fff;
}
@keyframes topIn {
from { transform: translateY(-50px) }
to { transform: translateY(0px) }
}
@keyframes leftIn {
from {
transform: translateX(-50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
.delay200 {
animation-delay: 200ms;
animation-fill-mode: backwards!important;
}
.delay400 {
animation-delay: 400ms;
animation-fill-mode: backwards!important;
}
.delay600 {
animation-delay: 600ms;
animation-fill-mode: backwards!important;
}
.delay800 {
animation-delay: 800ms;
animation-fill-mode: backwards!important;
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
container.classList.remove('animated');
}, !1);
jsのロジックはまったく変更されていないことがわかりました。必要に応じてアニメーションを追加/削除するだけです。
イースターエッグ:
実際には、さらに厄介なことに遭遇することもあります。それはクラスの作成を遅らせるためです。どのくらいの時間差でどれだけの要素を使うか分からないのですが、すべて手書きだと二度手間になってしまいます。したがって、jsを使用して動的に挿入できます。コードは次のとおりです:
const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
var sheets = document.styleSheets;
var len = sheets.length;
for(var i = 0; i <= len; i++) {
var sheet = sheets.item(i);
try {
if (sheet.cssRules) {
return sheet;
}
} catch(e) {}
}
var style = document.createElement('style');
style.type = "text/css";
document.getElementsByTagName('head')[0].appendChild(style);
return style.sheet;
}
関連する推奨事項:
php 関数 array_push() は、配列の末尾に 1 つ以上の要素を挿入します
JavaScript は、配列の末尾に 1 つ以上の要素を追加します配列を取得し、新しい配列を返します。 length メソッド Push()
PHP は、複数の要素の順列と組み合わせを出力します_PHP チュートリアル
以上がCSS3で複数の要素を連続して表示するエフェクトを実装する方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。