プロジェクトファイルの目的は、@keyframeを使用してCSSアニメーションを練習し、Angular2にいくつかの異なるコンポーネントを表示することでした。私はCSSとAngular2を同時に勉強し始めました。HTMLのコンポーネント配置が、私が揃えた順序に従っていない
ウェブブラウザにロードしたときに<app-root>テンプレートに設定したタグの順序が適用されないという問題があります。 <contents>テンプレートは中央にある必要がありますが、<bottomline>の下に表示されます。
<body>タグindex.htmlは<app-root>となり、このファイルでも滝の背景画像が扱われます。
これは<app-root>の寺院です。
<titlebar></titlebar>
<contents></contents>
<bottomline></bottomline>
だから<contents>は中央にあるべきであるが、結果は以下の通りである：
<titlebar>と<bottomline>は同じ構造を有しています。 2つの違いは、<div>タグ内のテキストとクラスセレクタの名前だけです。
<div class="titlebar">
titlebar!
</div>
これはtitlebar.component.cssです。
div.titlebar{
width: 100%;
height: 50px;
margin: 0 0 0 0;
background: rgba(0, 0, 0, 0.55);
color: #fff;
}
body.component.html、.tsのどのセレクタ名が<contents>に設定されている：
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
この1つbody.component.cssです。このウェブサイトの質問から.outer、.middle、および.innerセレクタをコピーして<div>タグを中央に配置しました。私はアニメーションが問題を引き起こすとは思わない。私はコメントにアニメーションコードを設定すると、思考は良くなりませんでした。私の常識で
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;}
.middle {
display: table-cell;
vertical-align: middle;}
.inner {
animation-duration: 3s;
animation-name: mainbox;
animation-iteration-count: 1;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 80%;
background: rgba(0, 0, 0, 0.55);
}
@keyframes mainbox{
from{
background: rgba(0, 0, 0, 0);
height: 0%;
}
to{
background: rgba(0, 0, 0, 0.55);
height: 80%;
}
}
自分の位置を切り替える<contents>と<bottomline>タグのための理由はありません..私は何をしないのですか？おそらくposition: absoluteの
ちょっとあなたが言いました内容を削除することで、正しい注文が得られました。今私はいくつかのマージンと高さの問題に対処しなければならない..ありがとう！ –
問題なし、幸せなコーディング:) – HolyMoly