Nytnelav's questions

任务是这样的，有图片和视频：

<img src="<?php echo $catalogProd['prod-img']; ?>" alt="<?php echo $catalogProd['prod-descr']; ?>">
<video class="video" playsinline="" autoplay="" loop="" muted="">
    <source src="<?php echo $catalogProd['prod-video']; ?>" type="video/mp4">
</video>

使用 Custom Field Suite 插件从 WordPress amino 获取它们的链接。客户想要插入图像或视频。如果管理面板中没有插入图片，则img src="empty here"，但会显示未加载图片的图标，与视频相同，只是有一个125px高的空块。我试图通过这样的条件隐藏图像或视频：

<div class="catalog">

  <?php
  $catalog = CFS()->get('catalog-prod');
  foreach ($catalog as $catalogProd) {
  ?>

    <a href="<?php echo $catalogProd['prod-link']; ?>" class="prod">
      <img src="<?php echo $catalogProd['prod-img']; ?>" alt="<?php echo $catalogProd['prod-descr']; ?>">
      <video class="video" playsinline="" autoplay="" loop="" muted="">
        <source src="<?php echo $catalogProd['prod-video']; ?>" type="video/mp4">
      </video>
      <p class="slug-ali">Aliexpress</p>
      <p class="prod-descr"><?php echo $catalogProd['prod-descr']; ?></p>
      <p class="prod-price"><?php echo $catalogProd['prod-price']; ?></p>
      <button class="prod-btn"><?php echo $catalogProd['prod-btn']; ?></button>
    </a>

  <?php 
  $prodImg = $catalogProd['prod-img'];
  $prodVideo = $catalogProd['prod-video'];
      echo $prodImg; //если изображение загружено, то выводит ссылку, если нет, то пусто
      echo $prodVideo; // тоже самое
      if ($prodImg == "") { ?>
          <style>
              .prod img{
                  display:none;
              }
          </style>
      <?php }  else { ?>
          <style>
              .prod video{
                  display:none;
              }
          </style>
      <?php } 
       
  }
     ?>


</div>

但它并没有隐藏，在代码检查器中显示：无；不知何故划掉了。告诉我我做错了什么？

告诉我为什么当你再次点击元素时，会有 2 秒的停顿？那些。我按第一次 - 事件立即触发，我按第二次 - 事件在 2 秒后触发。如何消除这 2 秒的延迟？

    if (document.querySelector('.tab-description')?.innerHTML) {
   document.querySelector('.tab-description').onclick = function () {
      document.querySelector('.woocommerce-Tabs-panel--description').classList.toggle('tab-active');
   }
}
if (document.querySelector('.tab-reviews')?.innerHTML) {
   document.querySelector('.tab-reviews').onclick = function () {
      document.querySelector('.woocommerce-Reviews').classList.toggle('tab-active');
   }
}

css

.woocommerce-Tabs-panel--description {
   max-height: 0;
   transition: all 2s ease 0s;
   overflow: hidden;
}
.woocommerce-Reviews {
   max-height: 0;
   transition: all 2s ease 0s;
   overflow: hidden;
}
.tab-active {
   max-height: 800px;
   transition: all 2s ease 0s;
}

告诉我如何实现这样的文本动画，如本网站 - https://alethemes.com/ale-fashion/。文字“即将收藏……”的出现。有可能用纯css实现吗？或者也许有一些网站、资源有现成的类似解决方案。