如何为fa图标更改制作动画？

Question

https://imgflip.com/gif/3qzcjs 扩展此菜单后，我想更改fa图标。 我试图更改班级，但图像没有变化。

         <ul class="list-unstyled components">
             <li>
                 <NavLink href="/">
                     Acasă
                 </NavLink>
             </li>
             <li>
                 <a @onclick="(() => ToggleNav(1))" data-toggle="collapse">Articole <i class="fa @(this.IsHidden1 ? "fa-angle-right" : "fa-angle-down")"></i></a>
                 <ul class="list-unstyled sub-menu @(this.IsHidden1 ? "toggle-hide": "toggle-show")">
                     <li>
                         <NavLink class="testclass" href="/sdfds">
                             SubMenu1
                         </NavLink>
                     </li>
                     <li>
                         <NavLink class="testclass" href="/sdfds">
                             SubMenu2
                         </NavLink>
                     </li>
                 </ul>
             </li>
</ul>


 @code {
     protected bool IsHidden1 { get; set; } = true;

     protected void ToggleNav(int navId)
     {
         switch (navId)
         {
             case 1:
                 IsHidden1 = !IsHidden1;
                 break;
         }
     }
 }

我试图调用StateHasChanged（）;但也不行。 您能帮我在onclick上设置图标动画吗？