From d81b1c5981365c245c5a88616d3f3b952790d49d Mon Sep 17 00:00:00 2001
From: saller <weskerli@163.com>
Date: Mon, 28 Aug 2023 18:35:42 +0800
Subject: [PATCH] docs(comp:dropdown): add rotate animation to demos (#1671)

---
 packages/components/dropdown/demo/Basic.vue  |  2 +-
 packages/components/dropdown/demo/Button.vue | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/components/dropdown/demo/Basic.vue b/packages/components/dropdown/demo/Basic.vue
index 74e2917eb..ca099d46b 100644
--- a/packages/components/dropdown/demo/Basic.vue
+++ b/packages/components/dropdown/demo/Basic.vue
@@ -1,6 +1,6 @@
 <template>
   <IxDropdown v-model:visible="visible">
-    <a class="ix-dropdown-trigger">Hover me <IxIcon :name="visible ? 'up' : 'down'"></IxIcon></a>
+    <a class="ix-dropdown-trigger">Hover me <IxIcon name="down" :rotate="visible ? 0 : -180"></IxIcon></a>
     <template #overlay>
       <IxMenu :dataSource="dataSource" :selectable="false" @click="onClick"></IxMenu>
     </template>
diff --git a/packages/components/dropdown/demo/Button.vue b/packages/components/dropdown/demo/Button.vue
index 3cdd2ed0e..5aced103c 100644
--- a/packages/components/dropdown/demo/Button.vue
+++ b/packages/components/dropdown/demo/Button.vue
@@ -11,16 +11,21 @@
     </IxButtonGroup>
     <IxButtonGroup>
       <IxButton @click="onClick">Button</IxButton>
-      <IxDropdown>
-        <IxButton icon="setting" shape="square"></IxButton>
+      <IxDropdown v-model:visible="settingDropdownVisible">
+        <IxButton shape="square">
+          <IxIcon name="setting" :rotate="settingDropdownVisible ? 0 : -180" size="16px" />
+        </IxButton>
         <template #overlay>
           <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
         </template>
       </IxDropdown>
     </IxButtonGroup>
 
-    <IxDropdown>
-      <IxButton>Button <IxIcon name="down" size="16px" style="margin-left: 4px"></IxIcon></IxButton>
+    <IxDropdown v-model:visible="arrowDropdownVisible">
+      <IxButton>
+        Button
+        <IxIcon name="down" :rotate="arrowDropdownVisible ? 0 : -180" size="16px" style="margin-left: 4px"></IxIcon>
+      </IxButton>
       <template #overlay>
         <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
       </template>
@@ -29,8 +34,13 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import { MenuData } from '@idux/components/menu'
 
+const settingDropdownVisible = ref(false)
+const arrowDropdownVisible = ref(false)
+
 const dataSource: MenuData[] = [
   { type: 'item', key: 'one', label: 'One' },
   { type: 'item', key: 'two', label: 'Two' },