Vue.jsを使ってフロントエンド開発をしています。
以下のような構成になっています。
html
1<div id=first-section> 2 //スクロールするとフェードインする要素 3</div> 4<div id=second-section> 5 // 次の要素 6</div>
このときにスクロールするとフェードインするアニメーションがあるのですが、フェードインする要素が最初はないため、高さ0となってしまい、 section-sectionとの間が0になり、次の要素が見えてしまいます。
html
1<div id=first-section> 2 // 高さ0となってしまい、 section-sectionとの間が0になってしまう 3</div> 4<div id=second-section> 5 // 次の要素 6</div>
しかし
css
1#first-section{ 2 height: 400px; 3
などとしたいのですが、可変長
にしたいので、height
指定をしたくありません。
どのようにすれば間を保てるでしょうか?
さらなる問題としてページ内
リンクが、フェードインする前の要素の高さを取得するため、フェードインしたあとと前では位置が変わってしまいます。