public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(favoriates) add css wobble animation to icon hover and tool drag for better user experience

Browse Source
This commit is contained in:
chadmin 2024-10-27 20:46:28 -07:00
parent 0b1b98f93e
commit d6ea82384c
1 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/Home.page.vue
View File

@ -76,7 +76,7 @@ function onUpdateFavoriteTools() {
<h3 class="mb-5px mt-25px font-500 text-neutral-400">
{{ $t('home.categories.favoriteTools') }}
<c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
<n-icon :component="IconDragDrop" size="18" />
<n-icon :component="IconDragDrop" size="18" class="icon-wobble" />
</c-tooltip>
</h3>
<Draggable
@ -133,18 +133,36 @@ function onUpdateFavoriteTools() {
background-color: #ccc;
border: 2px dashed #666;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
animation: ghost-favorites-draggable-animation 0.2s ease-out;
animation: ghost-favorites-draggable-animation 0.1s ease-out;
}
@keyframes ghost-favorites-draggable-animation {
0% {
opacity: 0;
transform: scale(0.9);
transform: scale(0.9) rotate(-2deg);
}
50% {
opacity: 0.4;
transform: scale(1.0) rotate(4deg);
}
100% {
opacity: 0.4;
transform: scale(1.0);
transform: scale(1.0) rotate(-2deg);
}
}
.icon-wobble:hover {
transform: scale(1.3);
animation: icon-wobble-animation 0.2s ease-in-out;
}
@keyframes icon-wobble-animation {
0% {
transform: scale(1.3) rotate(-10deg);
}
50% {
transform: scale(1.3) rotate(20deg);
}
100% {
transform: scale(1.3) rotate(-10deg);
}
}
</style>