feat: smooth animation for risk items view

Signed-off-by: Carlos <568187512@qq.com>

src/app/shared/risk-item-picker/risk-items-visual-classify/risk-items-visual-classify.component.html

@@ -5,8 +5,8 @@
         <span
           nz-icon
           nzType="right"
-          class="text-gray-500 cursor-pointer transition-all hover:text-blue-500 rotate-90 mr-2"
-          [ngClass]="{ 'rotate-0': item.collapsed }"
+          class="text-gray-500 cursor-pointer transition-all hover:text-blue-500 mr-2"
+          [ngClass]="{ 'rotate-0': item.collapsed, 'rotate-90': !item.collapsed }"
           (click)="onToggleCollapse(item)"
         ></span>
       </span>
@@ -16,18 +16,20 @@
         </span>
       </span>
     </div>
-    @if (!item.collapsed) {
-      <div class="pl-4 pt-2">
-        @for (item of item.items; track $index) {
-          <div class="mb-2">
-            <span class="inline-block text-sm">
-              <span class="inline-block size-2 rounded-full bg-blue-500 mr-1"></span>
-              <span> {{ item.title }}</span>
-            </span>
-          </div>
-        }
-      </div>
-    }
+    <div class="overflow-hidden">
+      @if (!item.collapsed) {
+        <div @verticalInOutRelative class="pl-4 pt-2">
+          @for (item of item.items; track item.id) {
+            <div @verticalInOutRelative class="mb-2">
+              <span class="inline-block text-sm">
+                <span class="inline-block size-2 rounded-full bg-blue-500 mr-1"></span>
+                <span> {{ item.title }}</span>
+              </span>
+            </div>
+          }
+        </div>
+      }
+    </div>
 
     <!-- <span
       nz-icon

src/app/shared/risk-item-picker/risk-items-visual-classify/risk-items-visual-classify.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, SimpleChanges } from '@angular/core';
+import { horizontalInOut, verticalInOut, verticalInOutRelative } from '../../../common.animation';
 import { KnowledgeService } from '../../../services/knowledge.service';
 import { CommonNzModule } from './../../../common.nz.module';
 
@@ -17,6 +18,7 @@ interface EasyClassified {
   imports: [CommonNzModule],
   templateUrl: './risk-items-visual-classify.component.html',
   styleUrl: './risk-items-visual-classify.component.less',
+  animations: [verticalInOut, horizontalInOut, verticalInOutRelative],
 })
 export class RiskItemsVisualClassifyComponent {
   @Input() data!: Knowledge.RiskItem[];