通过 CSS/jQuery 淡入淡入

Question

我在尝试向以下代码添加淡入过渡时跌跌撞撞。代码来自blog，正如您所见，它创建了一个可点击的菜单项，点击时会展开。我没有问题让代码按作者的意图工作。但是，我想使用自定义图形作为我的基本图像和子菜单，但这样做我无法将子菜单隐藏在基本菜单后面。我认为向他现有的代码引入淡入（或/或 CSS 和 jquery）转换会相当简单，这样一开始子菜单是不可见的（不透明度：0），然后在点击时淡入。你可以猜到，我的尝试失败了。

如何编写这些 sn-ps 以使 .et-pb-icon 类最初被隐藏并在过渡完成时实现 100% 的不透明度？

谢谢。

       <style>
          .has-transform, .transform_target .et-pb-icon {
            transition: all 400ms ease-in-out;
          } 
          .toggle-transform-animation {
            transform: none !important;
          }
          .transform_target {
            cursor: pointer;
          }
          .toggle-active-target.et_pb_blurb .et-pb-icon {
          background-color: transparent;
          }
       </style>

       <script>
          (function($) {
            $(document).ready(function(){
              $('.transform_target').click(function(){
                $(this).toggleClass('toggle-active-target');
                $('.has-transform').toggleClass('toggle-transform-animation');   
              });    
            });
          })( jQuery );   
          </script>

Answer 1

回答：

终于找到了正确的代码。 （我使用 .et_pb_module_header 代替 .et_pb_module_icon 次要的仅使用文本作为关键字）。

<style>
  .has-transform, .transform_target .et_pb_module_header {
    transition: all 400ms ease-in-out;
    opacity: 1;
  } 
  .toggle-transform-animation {
    transform: none !important;
    opacity: 0;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et_pb_module_header {
    background-color: transparent;
  }
</style>

Answer 2

没有 HTML 部分不是 100%，但你不能做类似的事情

.et-pb-icon {
    opacity: 0;
    transition: all 400ms ease-in-out;
} 

.has-transform, .transform_target .et-pb-icon {
    opacity: 1;
    transition: all 400ms ease-in-out;
}