通过CSS/jQuery淡入过渡

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

如何编写这些代码段，使类.et pb图标最初隐藏起来，并在转换完成时达到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>

.has transform、.transform_target.et pb图标{
过渡：所有400ms缓进缓出；
} 
.切换变换动画{
转变：无！重要；
}
.转换目标{
光标：指针；
}
.toggle-active-target.et_pb_blurb.et pb图标{
背景色：透明；
}
（函数（$）{
$（文档）.ready（函数（）{
$（'.transform_target'）。单击（函数（）{
$（this.toggleClass（'toggle-active-target'）；
$（'.has transform'）.toggleClass（'toggle-transform-animation'）；
});    
});
})（jQuery）；

如果没有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;
} 

答复:

终于找到了正确的代码。 （我使用.et_pb_module_标题代替了.et_pb_module_图标，仅次于仅使用文本作为关键字）

.has transform、.transform\u target.et\u pb\u module\u头{
过渡：所有400ms缓进缓出；
不透明度：1；
} 
.切换变换动画{
转变：无！重要；
不透明度：0；
}
.转换目标{
光标：指针；
}
.toggle-active-target.et_pb_blurb.et_pb_模块标题{
背景色：透明；
}

谢谢您的回复。不幸的是，我无法让代码正常工作。这就是让我困惑的地方。添加不透明度的时刻：1；在该片段的任何地方，它们的目标始终可见。我想我可以在页面外隐藏目标，但这种方法对我来说似乎不雅观。请尝试这样做，这样您就不会向父元素添加不透明度，而只是将其添加到您试图将其作为目标的子元素

.et pb icon{opacity:0；transition:all 400ms ease in out；}。has transform.transformtarget.et pb icon{opacity:1；transition:all 400ms ease-in-out；}.has transform{transition:all 400ms ease-in-out；}

--再次感谢您的回复，Dan。抱歉，响应太慢了。我终于能够构建正确的代码段。我把它弄得比原来更难。请参见上文。

<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>