在调用.toggle()的地方，您可以在那里传递若干毫秒作为过渡效果长度。.toggle(300)简单！
但是，使用.slideToggle(300)会看起来更好。
如果您想添加一个每次单击都有延迟的假加载器，只需添加加载器元素，等待，然后删除它并执行slideToggle

$(this).append("<div class='loading'><span class='fa fa-spinner'></span> Loading...</div>");         
setTimeout(()=>{
  $(this).find('.loading').remove();
  $(this).children().children().slideToggle(300);
}, 300)

字符串
以下是添加了该功能的演示：

$.fn.extend({
    treed: function (o) {
      var openedClass = 'fa-minus-circle';
      var closedClass = 'fa-plus-circle';
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).append("<div class='loading'><span class='fa fa-spinner'></span> Loading...</div>");         
                      setTimeout(()=>{
                        $(this).find('.loading').remove();
                        $(this).children().children().slideToggle(300);
                      }, 300)
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});
//Initialization of treeviews
$('#tree1').treed();
$('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});

x

.tree, .tree ul {
  margin:0;
  padding:0;
  list-style:none;
  margin-left:10px;
}
.tree ul {
  margin-left:1em;
  position:relative
}
.tree ul ul {
  margin-left:.5em
}
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid
}
.tree li {
  margin:0;
  padding:0 1em;
  line-height:2em;
  color:#369;
  font-weight:700;
  position:relative;
}
.tree ul li:before {
  content:"";
  display:block;
  width:10px;
  height:0;
  border-top:1px solid;
  margin-top:-1px;
  position:absolute;
  top:1em;
  left:0
}
.tree ul li:last-child:before {
  background:#fff;
  height:auto;
  top:1em;
  bottom:0
}
.indicator {
  margin-right:5px;
}
.tree li a {
  text-decoration: none;
  color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
  text-decoration: none;
  color:#369;
  border:none;
  background:transparent;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  outline: 0;
}
.loading {
  font-style: italic;
}

<div class="row">
    <div class="col-md-4">
       <ul id="tree2">
          <li>
             <a href="#">TECH</a>
             <ul>
                <li>Company Maintenance</li>
                <li>
                   Employees
                   <ul>
                      <li>
                         Reports
                         <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                         </ul>
                      </li>
                      <li>Employee Maint.</li>
                   </ul>
                </li>
                <li>Human Resources</li>
             </ul>
          </li>
          <li>
             XRP
             <ul>
                <li>Company Maintenance</li>
                <li>
                   Employees
                   <ul>
                      <li>
                         Reports
                         <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                         </ul>
                      </li>
                      <li>Employee Maint.</li>
                   </ul>
                </li>
                <li>Human Resources</li>
             </ul>
          </li>
          
       </ul>
    </div>
 </div>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

的字符串