ACリニューアル更新に伴う不具合解消を目的

はじめに
input/labelからdetails/summarへの更新です
【更新背景】
checked属性を追加し、初期表示「AC-OPEN」とした場合「PageSpeed Insights」で、猛烈なスコアーダウン発生に伴います。Total Blocking Time:0㎜~約300秒⇒3000㎜~7000秒..。※バグか否か不明ですが「details/summar」では問題ありません!
【ご依頼したいこと】
更新に伴い、正常に動作していたものが、一部動作しなくなり「JSの力」が必要です。
ご指導をお願い致します。
問題点と改修内容
【AC➀】
.type-4に仕込んだアニメーションが、ページ読み込み時における「初回」しか起動せず。
.accordion-mainも同様。※open属性の影響です。
★具体的には「Win&android」が該当。アップル系OSでは「繰り返し」起動します。
☆.ac-sub-insideのアニメーションを「繰り返し」起動できる仕様へお願いします。※AC展開時
※.type-5(JS併用型)のような、AC-展開時、動的クラスをJSで付ける ⇒AC-格納時、クラスを外す。このようなイメージでおります。
【AC➁】
.accordion-mainに紐づく「閉じる」ボタンが動作せず(当たり前ですが..。)
★旧ACからクラス名を含め変更した影響です。
☆正常動作するよう、お願いします。
※仕様については「閉じるボタン」クリック⇒スムーススクロールで、ACラベルへ戻し(滑らかに動作しない場合、instantが保険)配置は画面センター合わせのうえ、ACラベルクローズアニメーションで1サイクル。
【AC➂】
.type-4に仕込んだ「コピーボタン」が動作せず(よく分かりません..。)
★PCは問題ありませんが、iPhoneで動作しません。
☆正常に動作するよう、お願いします。
※仕様については「脱 jQuery」でお願いします。
改修に際し、不要となるクラス等は、当方で捜索のうえ削除(整理)します。
accordion-main
type-1
Webサイト運営理念深掘り
【目的】
読者の目に留まりやすい「SEO検索流入」上位表示がブログの根幹。高品質でGoogleさんの顔色を気にしない、健全なサイトを目指す!
【狙い】
自分と旅するタイランドで、指名検索されること!これぞまさにブロガーの誉。
【戦略】
品質第一。省スペースで合理化。唯一無二。アメージングなユーザー体験でおもてなし。
【ブログのあるべき姿】
サイト訪問者が「ハッピーな未来を想像」できる、自由なコンテンツ制作。
【達成するには】
1~99まで自分でスルしかない!
type-2
Webサイト運営理念深掘り
【目的】
読者の目に留まりやすい「SEO検索流入」上位表示がブログの根幹。高品質でGoogleさんの顔色を気にしない、健全なサイトを目指す!
【狙い】
自分と旅するタイランドで、指名検索されること!これぞまさにブロガーの誉。
【戦略】
品質第一。省スペースで合理化。唯一無二。アメージングなユーザー体験でおもてなし。
【ブログのあるべき姿】
サイト訪問者が「ハッピーな未来を想像」できる、自由なコンテンツ制作。
【達成するには】
1~99まで自分でヤルしかない!
type-3
タイトルとか
<備考>
とくにございません。
/* -----HTML----- */
/* -----CSS----- */
/* -----JS----- */
type-4
プロフィールページから引用。
海パンで喜んでる画像:1年目ガリ痩せ時代
このとき4年が経過。完全体だったが、写真はナッシ(*◔ڼ◔)
type-5
スムーズに動作します!ご参考までに。 STEP 3-B: 開閉アニメーション(JS併用)
.is-openedが動的に生成され、これを利用し「アニメーション」を仕込んでます










