Fix: grid index page flickers when performing fade-in animation

Author: apqx

_includes/head.html

@@ -32,8 +32,8 @@
 <!-- Site icon -->
  <!-- PWA, Chrome 添加到桌面图标 -->
 <link rel="manifest" href="/manifest.json" />
-<!-- Chrome Safari Tab 图标 -->
-<link rel="shortcut icon" href="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/icon/old_man_rounded.png"/>
+<!-- Chrome Safari 的 Tab 图标，如果尺寸太大可能不被使用 -->
+<link rel="shortcut icon" href="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/icon/old_man_rounded_white_bg_192.png"/>
 <!-- Safari 添加到桌面图标 -->
 <link rel="apple-touch-icon" href="https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/site/icon/old_man_white_bg.png"/>
 {% comment %} js和css由内部webpack工程输出，debug模式下使用localhost版本，release模式下使用托管在阿里云上的版本 {% endcomment -%}

_includes/index-posts-grid.html

@@ -1,3 +1,4 @@
+<!-- Jekyll生成的HTML列表默认隐藏，由React重新加载 -->
 <hr class="index-li-divider" />
 <section id="index-list-wrapper">
     <ul class="grid-index-ul">
@@ -7,7 +8,7 @@
         {%- break %}
         {% endif -%}
         {%- if post.categories contains index-category and post.hideFromIndex != true %}
-        <li class="grid-index-li">
+        <li class="grid-index-li style="display: none;"">
             <a class="index-a mdc-card grid-index-card grid-index-card__ripple" href="{{ post.url }}">
                 <section>
                     {%- if post.index-cover != null %}

_includes/index-posts.html

@@ -1,16 +1,9 @@
-<script>
-    // 为顶部卡片添加动画
-    const cardE = document.querySelector(".index-top-card")
-    if (cardE != null) {
-        cardE.classList.add("card-fade-in")
-    }
-</script>
-
+<!-- Jekyll生成的HTML列表默认隐藏，由React重新加载 -->
 <section id="index-list-wrapper">
     <ul class="index-ul">
         {% for post in site.posts %}
         {%- if post.categories contains index-category and post.hideFromIndex != true and post.pin == true %}
-        <li class="index-li index-li--pin">
+        <li class="index-li index-li--pin" style="display: none;">
             <a class="index-a mdc-card index-card" href="{{ post.url }}">
                 <section>
                     <h1 class="index-title">{{ post.title }}</h1>
@@ -29,7 +22,7 @@ <h1 class="index-title">{{ post.title }}</h1>
                 {%- break %}
             {% endif -%}
             {%- if post.categories contains index-category and post.hideFromIndex != true -%}
-            <li class="index-li">
+            <li class="index-li" style="display: none;">
                 <a class="index-a mdc-card index-card" href="{{ post.url }}">
                     <section>
                         <h1 class="index-title">{{ post.title }}</h1>
@@ -43,16 +36,4 @@ <h1 class="index-title">{{ post.title }}</h1>
             {% endif -%}
         {% endfor -%}
     </ul>
-</section>
-
-<script>
-    // 为Cover添加动画
-    const coverE = document.querySelector(".index-top-cover")
-    if (coverE != null) {
-        coverE.classList.add("image-height-animation")
-    }
-    // 隐藏所有item，由React重新加载
-    for(const e of document.querySelectorAll(".index-li")) {
-        e.style.display = "none";
-    }
-</script>
+</section>

_posts/opera/2021-01-09-昆曲「长生殿·闻铃」折子.md

@@ -7,7 +7,7 @@ actor: 王恒涛 杜鸿泽 王苏鹏
 mention: 
 date: 2021-01-09 +0800
 location: 杭州大剧院·可变剧场
-description: “背残日，风摇影，匹马崎岖怎暂停...萧条怎生，峨眉山下少人经”😮‍💨。这应该是他第二次演「闻铃」，是我第一次看「闻铃」，王恒涛，我记住这个名字了，未来可期也。
+description: “背残日，风摇影，匹马崎岖怎暂停...萧条怎生，峨眉山下少人经”。这应该是他第二次演「闻铃」，是我第一次看「闻铃」，王恒涛，我记住这个名字了。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210109/changshengdian_wenling/DSC02192_thumb.jpg
 cover-alt: 昆曲 长生殿 闻铃 王恒涛
 tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 长生殿 闻铃 王恒涛 杜鸿泽 王苏鹏 杭州大剧院·可变剧场
@@ -20,7 +20,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 长生殿 闻铃 王恒涛 杜
 {: class="surface-block"}  
 安史之乱，`唐明皇`避祸迁蜀，行至剑阁，正值风雨交加，听到檐前铃声聒耳，更加思念已在马嵬坡缢死的杨妃，不胜凄涼之感。
 
-“背残日，风摇影，匹马崎岖怎暂停...萧条怎生，峨眉山下少人经”😮‍💨。这应该是他第二次演「闻铃」，是我第一次看「闻铃」，王恒涛，我记住这个名字了，未来可期也。
+“背残日，风摇影，匹马崎岖怎暂停...萧条怎生，峨眉山下少人经”。这应该是他第二次演「闻铃」，是我第一次看「闻铃」，王恒涛，我记住这个名字了。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210109/changshengdian_wenling/DSC02204_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="长生殿 闻铃 王恒涛" }
 

_posts/opera/2021-07-18-昆曲「牡丹亭·寻梦」折子.md

@@ -7,7 +7,7 @@ actor: 吴心怡
 mention: 
 date: 2021-07-18 +0800
 location: 杭州大剧院·可变剧场
-description: 好听好美，她会成为浙昆第二个张志红的，只是现场感觉一些细节似乎有点“过”，稍突兀，收一下可能更好。期待下次剧场见，想看「游园」和「惊梦」✨。
+description: 好听好美，她会成为浙昆第二个张志红的，只是现场感觉一些细节似乎有点“过”，稍突兀，收一下可能更好。期待下次剧场见，想看「游园」和「惊梦」。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210718/mudanting_xunmeng/DSC06918_thumb.jpg
 index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210718/mudanting_xunmeng/DSC06917_thumb.jpg
 cover-alt: 昆曲 牡丹亭 寻梦 吴心怡
@@ -21,7 +21,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 牡丹亭 寻梦 吴心怡 杭
 {: class="surface-block"}  
 `杜丽娘`游园惊梦后，留恋梦境，难以释怀，独自重游花园，寻觅梦痕，倍加伤感，不久得病，郁郁而死。
 
-好听好美，她会成为浙昆第二个张志红的，只是现场感觉一些细节似乎有点“过”，稍突兀，收一下可能更好。期待下次剧场见，想看「游园」和「惊梦」✨。
+好听好美，她会成为浙昆第二个张志红的，只是现场感觉一些细节似乎有点“过”，稍突兀，收一下可能更好。期待下次剧场见，想看「游园」和「惊梦」。
 
 <!-- ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210718/mudanting_xunmeng/DSC07110_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="牡丹亭 寻梦 谢幕 吴心怡" } -->
 

_posts/opera/2021-08-08-昆曲「白兔记·产子」折子.md

@@ -9,7 +9,7 @@ date: 2021-08-08 +0800
 location: 杭州大剧院·可变剧场
 description: 我想，大部分人接触昆曲莫不是甜腻的生旦戏，小生和闺门旦的“青涩情窦”谁不爱看呢。而接触正旦确实不多，之前看过「阳告」和「刺虎」，加上今天的「产子」，抛弃、刺杀、欺凌均是悲多于喜。“爹娘在世把我如花朵，爹娘死，孤单如何过”，怀胎十月仍被驱使，寒夜中在磨坊产下一子取名“咬脐郎”，我能感受到昆曲用词渲染出的“悲”，不会浮于表面。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/baituji_chanzi/DSC07211_thumb.jpg
-index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/baituji_chanzi/DSC07211_cover_thumb.jpg
+index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/baituji_chanzi/DSC07260_index_thumb.jpg
 cover-alt: 昆曲 白兔记 产子 高璟玟
 tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 白兔记 产子 高璟玟 王翼骅 杭州大剧院·可变剧场
 ---

_posts/opera/2021-08-08-昆曲「红梨记·亭会」折子.md

@@ -8,7 +8,7 @@ mention:
 date: 2021-08-08 +0800
 location: 杭州大剧院·可变剧场
 description: “竹树金声响，梨花玉骨香，兰闺久寂寞，此夜恨更长”，我侧耳听，此亭岂是蓬山境❤️。
-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07362_thumb.jpg
+cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07451_cover_thumb.jpg
 index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07451_thumb.jpg
 cover-alt: 昆曲 红梨记 亭会 王文惠
 tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 红梨记 亭会 王文惠 王恒涛 杭州大剧院·可变剧场
@@ -65,7 +65,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 红梨记 亭会 王文惠 王
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07326_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="红梨记 亭会 王文惠" }
 
-![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07340_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="红梨记 亭会 王文惠" }
+<!-- ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07340_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="红梨记 亭会 王文惠" } -->
 
 *“爱花坞闲行，潜踪蹑迹，只图个美满前程🥰”*
 
@@ -121,6 +121,6 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 红梨记 亭会 王文惠 王
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07497_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="红梨记 亭会 王文惠 王恒涛" }
 
-*美人走了，弗开心🙁*
+*美人走了，不开心🙁*
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20210808/hongliji_tinghui/DSC07504_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="红梨记 亭会 王恒涛" }

_posts/opera/2021-10-23-昆曲「西厢记·佳期」折子.md

@@ -7,7 +7,7 @@ actor: 施洋 方莛玉 罗轩
 mention: 
 date: 2021-10-23 +0800
 location: 杭州大剧院·可变剧场
-description: “小姐小姐多丰采，君瑞君瑞济川才”，这群“代”字辈的新人大约20岁左右吧，可能也不到20岁，花样年华搭配精致戏妆在舞台上演《西厢记》非常好看✨。王恒涛之外，罗轩也是一个帅小生，期待更多小剧场演出，多多益善。
+description: “小姐小姐多丰采，君瑞君瑞济川才”，这群“代”字辈的新人大约20岁左右吧，可能也不到20岁，花样年华搭配精致戏妆在舞台上演《西厢记》非常好看。王恒涛之外，罗轩也是一个帅小生，期待更多小剧场演出，多多益善。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20211023/xixiangji_jiaqi/DSC07683_thumb.jpg
 index-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20211023/xixiangji_jiaqi/DSC07711_thumb.jpg
 cover-alt: 昆曲 西厢记 佳期 施洋
@@ -21,7 +21,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 西厢记 佳期 施洋 方莛
 {: class="surface-block"}  
 `红娘`怂恿`莺莺`到`张生`书斋幽会，自己在外望风。想起背着老夫人促成这段姻缘，十分得意。
 
-“小姐小姐多丰采，君瑞君瑞济川才”，这群“代”字辈的新人大约20岁左右吧，可能也不到20岁，花样年华搭配精致戏妆在舞台上演《西厢记》非常好看✨。王恒涛之外，罗轩也是一个帅小生，期待更多小剧场演出，多多益善。
+“小姐小姐多丰采，君瑞君瑞济川才”，这群“代”字辈的新人大约20岁左右吧，可能也不到20岁，花样年华搭配精致戏妆在舞台上演《西厢记》非常好看。王恒涛之外，罗轩也是一个帅小生，期待更多小剧场演出，多多益善。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20211023/xixiangji_jiaqi/DSC08030_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="西厢记 佳期 谢幕 方莛玉 罗轩" }
 

_posts/opera/2022-07-23-昆曲「望湖亭·照镜」折子.md

@@ -8,7 +8,7 @@ mention: 周沫
 date: 2022-07-23 +0800
 location: 杭州大剧院·可变剧场
 description: 王翼骅，我见过他的，半年前元宵节第一次去浙昆化妆室，他就在进门的一角，交谈了一会儿而我当时居然没有认出来，可能和丑角脸上总有的那个“白方块”有关，妆前妆后完全不一样。 「照镜」是第一次看，很棒的夏日轻喜剧，而且“大官人的容颜好似雨打灰沙地，钉靴踩烂泥”，真·惨绝人寰的比喻（感觉有被波及到😳）。
-cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220723/wanghuting_zhaojing/DSC02112_thumb.jpg
+cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220723/wanghuting_zhaojing/DSC02112_index_thumb.jpg
 cover-alt: 昆曲 望湖亭 照镜 施洋 王翼骅
 tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 望湖亭 照镜 施洋 王翼骅 周沫 杭州大剧院·可变剧场
 ---
@@ -20,7 +20,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 望湖亭 照镜 施洋 王翼
 {: class="surface-block"}  
 关江财主`颜秀`游洞庭湖山时遇高员外家小姐，顿觉容貌倾城，便托人说媒，但是高家一定要亲相女婿。`颜秀`其貌不扬而从不知觉，在家人点破以后好奇的去房中照镜，才发现自己相貌丑陋。后托人前去代为相亲，不料反成为他人美事。
 
-王翼骅，我见过他的，半年前元宵节第一次去浙昆化妆室，他就在进门的一角，交谈了一会儿而我当时居然没有认出来，可能和丑角脸上总有的那个“白方块”有关，妆前妆后完全不一样。 「照镜」是第一次看，很棒的夏日轻喜剧，而且“大官人的容颜好似雨打灰沙地，钉靴踩烂泥”，真·惨绝人寰的比喻（感觉有被波及到😳）。
+王翼骅，我见过他的，半年前元宵节第一次去浙昆化妆室，他就在进门的一角，交谈了一会儿而我当时居然没有认出来，可能和丑角脸上总有的那个“白方块”有关，妆前妆后完全不一样。「照镜」是第一次看，很棒的夏日轻喜剧，而且“大官人的容颜好似雨打灰沙地，钉靴踩烂泥”，真·惨绝人寰的比喻（感觉有被波及到😳）。
 
 *两周前在浙昆后台偶遇的`施洋`*
 
@@ -89,8 +89,6 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 望湖亭 照镜 施洋 王翼
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220723/wanghuting_zhaojing/DSC02099_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="望湖亭 照镜 王翼骅" }
 
-<!-- ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220723/wanghuting_zhaojing/DSC02106_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="望湖亭 照镜 施洋 王翼骅" } -->
-
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220723/wanghuting_zhaojing/DSC02108_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="望湖亭 照镜 施洋 王翼骅" }
 
 *大官人...好颜艺...*

_posts/opera/2022-09-25-昆曲「西厢记」四折.md

@@ -7,7 +7,7 @@ actor: 施洋 方莛玉 罗轩
 mention: 王翼骅 李琼瑶
 date: 2022-09-25 +0800
 location: 杭州大剧院·可变剧场
-description: 同一个剧团同一台戏，感觉阿逍的红娘是很小只的灵动可爱，而施洋则是另一种风格，戏曲演员中少见的纤细高挑，很搭一个“洋”字💃🏻。开场前隐约“偷听”到他/她们老师也来看了，不知道会如何评价。但从一个普通观众的视角，我看到一场精彩演出，收获一个开心周末，真不错。
+description: 同一个剧团同一台戏，感觉阿逍的红娘是很小只的灵动可爱，而施洋则是另一种风格，戏曲演员中少见的纤细高挑，很搭一个“洋”字。开场前隐约“偷听”到他/她们老师也来看了，不知道会如何评价。但从一个普通观众的视角，我看到一场精彩演出，收获一个开心周末，真不错。
 cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220925/xixiangji/DSC03690_thumb.jpg
 cover-alt: 昆曲 西厢记 跳墙着棋 施洋 方莛玉 罗轩
 tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 西厢记 寄柬 跳墙着棋 佳期 拷红 施洋 方莛玉 罗轩 王翼骅 李琼瑶 杭州大剧院·可变剧场
@@ -31,7 +31,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 西厢记 寄柬 跳墙着棋 
 
 这应该是他/她们仨第一次演完整的《西厢记》，而且是在近距离小剧场。开始前竖着耳朵隐约“偷听”到他/她们老师也来看了（小声说：其实还偷听到另一些有趣的事🙃），就坐我前面。不知道她会如何评价，但从一个普通台下观众的视角，我看到的是一场精彩演出，收获的是一个开心周末，真不错。
 
-*偷听.jpg👀*
+*偷听.jpg*
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20220925/xixiangji/IMG_2811_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="张唐逍" }
 

_posts/opera/2022-11-06-昆曲「水浒记·借茶」折子.md

@@ -102,7 +102,7 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 水浒记 借茶 高璟玟 杜
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06268_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 高璟玟 杜鸿泽" }
 
 
-![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06271_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 杜鸿泽" }
+<!-- ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06271_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 杜鸿泽" } -->
 
 *“喔呦，好茶叶，生青碧绿”*
 
@@ -210,11 +210,10 @@ tags: 看剧 摄影 戏剧 杭州 昆曲 浙昆 水浒记 借茶 高璟玟 杜
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06375_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 杜鸿泽 高璟玟" }
 
-*如果不是造化弄人...好可惜...*
+*可是...好可惜...*
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06378_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 高璟玟" }
 
-
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06379_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 高璟玟" }
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/opera/20221106/shuihuji_jiecha/DSC06380_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg operaCopyright" alt="水浒记 借茶 高璟玟" }