You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@hertzbeat.apache.org by go...@apache.org on 2025/02/07 02:18:56 UTC
(hertzbeat) branch master updated: [improve](alert-center) enhance alert card animations and interactions (#3055)
This is an automated email from the ASF dual-hosted git repository.
gongchao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new 02f635bdd3 [improve](alert-center) enhance alert card animations and interactions (#3055)
02f635bdd3 is described below
commit 02f635bdd3c389640d624e49086d02f651e6f30d
Author: Logic <zq...@dromara.org>
AuthorDate: Fri Feb 7 10:18:52 2025 +0800
[improve](alert-center) enhance alert card animations and interactions (#3055)
---
.../alert/alert-center/alert-center.component.less | 78 ++++++++++++++++++++--
1 file changed, 73 insertions(+), 5 deletions(-)
diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.less b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
index c0827e819a..5e42f46244 100644
--- a/web-app/src/app/routes/alert/alert-center/alert-center.component.less
+++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.less
@@ -284,20 +284,88 @@
@keyframes slideInFromRight {
0% {
- transform: translateX(100%);
+ transform: translate3d(120%, 0, 0) scale(0.95) rotate(3deg);
opacity: 0;
+ filter: blur(2px);
+ box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}
- 100% {
- transform: translateX(0);
+ 50% {
opacity: 1;
+ filter: blur(0);
+ transform: translate3d(-5%, 0, 0) scale(1) rotate(-1deg);
+ }
+ 75% {
+ transform: translate3d(2%, 0, 0) scale(1) rotate(0.5deg);
+ }
+ 100% {
+ transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+ box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
}
}
.alert-card {
position: relative;
- transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+ transition:
+ transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ opacity 0.5s ease-out,
+ box-shadow 0.3s ease;
+ will-change: transform, opacity;
+
+ &:hover {
+ transform: translateY(-2px) scale(1.005);
+ box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(255, 255, 255, 0.3) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ opacity: 0;
+ animation: slideGlow 1s cubic-bezier(0.4, 0, 0.2, 1);
+ }
&.new-alert {
- animation: slideInFromRight 0.5s ease-out forwards;
+ animation:
+ slideInFromRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+ cardLanding 0.6s 0.3s ease-out forwards;
+ }
+}
+
+@keyframes slideGlow {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.6;
+ }
+ 100% {
+ transform: translateX(100%);
+ opacity: 0;
}
}
+
+@keyframes cardLanding {
+ 0% { transform: translateY(0); }
+ 50% { transform: translateY(-8px); }
+ 80% { transform: translateY(2px); }
+ 100% { transform: translateY(0); }
+}
+
+.alert-card:nth-child(1) { animation-delay: 0.1s; }
+.alert-card:nth-child(2) { animation-delay: 0.15s; }
+.alert-card:nth-child(3) { animation-delay: 0.2s; }
+.alert-card:nth-child(n+4) { animation-delay: 0.25s; }
+
+.alert-cards {
+ perspective: 1200px;
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@hertzbeat.apache.org
For additional commands, e-mail: notifications-help@hertzbeat.apache.org