TOPページ お知らせアニメーション

[takashi0602]

概要(Overview・Refs Issue)

close EC-CUBE/Eccube-Styleguide#212
TOPページ内にある、お知らせのアニメーションの修正

実装に関する補足(Appendix)

動きがおかしかったのは、 margin がアニメーション前になかったからと、アニメーションの動きが max-height: 100vh; になっていたからです。なので、

• アニメーション前にmarginを付ける。
• height の値を取得し、 max-height: 0; にする。そして、ボタンを押すと取得した値を max-height の値に変え、再度ボタンを押すと max-height: 0; に変える。

この2つのように変更しました。

相談（Discussion）

現在、リロードせず画面サイズを変更すると、お知らせの説明文の行数が変わり、 overflow: hidden; の影響で、説明文が途中で切れてしまいます。
原因は最初に height の値を取得しているので、途中で height の値が変わると対応できないからです。

[takashi0602]

@mikakane レビューお願いします。

[okazy]

以下の問題があったので別のプルリクで修正しました。
#3812

• 新着情報の�非表示、削除等を行うと不具合が発生する。
• scssに不要なコードが残っていた
• アニメーションのjsが冗長
• htmlタグのidが被りそうなのでつけたくない