mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 14:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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