mirror of
https://github.com/robonen/canvas-3d.git
synced 2026-03-20 02:44:40 +00:00
feat(components): accordion icon animation
This commit is contained in:
@@ -8,8 +8,7 @@ const showForm = ref<boolean>(false);
|
||||
<div class="header" @click="showForm = !showForm">
|
||||
<h2>{{ title }}</h2>
|
||||
<button class="button">
|
||||
<IconClose v-if="showForm"/>
|
||||
<IconOpen v-else/>
|
||||
<IconOpen class="icon" :class="{icon_close: showForm}"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content" v-show="showForm">
|
||||
@@ -35,6 +34,14 @@ const showForm = ref<boolean>(false);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: transform 0.2s;
|
||||
|
||||
&_close {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--icon-color);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user