feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/styles/transitions.css

@@ -0,0 +1,79 @@
+/* 配方取自 react-view-transitions 技能。时长变量见 tokens.css。 */
+@keyframes fade {
+  from {
+    filter: blur(3px);
+    opacity: 0;
+  }
+
+  to {
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide {
+  from {
+    translate: var(--slide-offset);
+  }
+
+  to {
+    translate: 0;
+  }
+}
+
+::view-transition-old(.fade-out) {
+  animation: var(--duration-exit) ease-in fade reverse;
+}
+
+::view-transition-new(.fade-in) {
+  animation: var(--duration-enter) ease-out var(--duration-exit) both fade;
+}
+
+::view-transition-old(.nav-forward) {
+  --slide-offset: -60px;
+
+  animation:
+    var(--duration-exit) ease-in both fade reverse,
+    var(--duration-move) ease-in-out both slide reverse;
+}
+
+::view-transition-new(.nav-forward) {
+  --slide-offset: 60px;
+
+  animation:
+    var(--duration-enter) ease-out var(--duration-exit) both fade,
+    var(--duration-move) ease-in-out both slide;
+}
+
+::view-transition-old(.nav-back) {
+  --slide-offset: 60px;
+
+  animation:
+    var(--duration-exit) ease-in both fade reverse,
+    var(--duration-move) ease-in-out both slide reverse;
+}
+
+::view-transition-new(.nav-back) {
+  --slide-offset: -60px;
+
+  animation:
+    var(--duration-enter) ease-out var(--duration-exit) both fade,
+    var(--duration-move) ease-in-out both slide;
+}
+
+/* 顶栏、底栏使用 backdrop-filter,需隐藏旧快照以免闪烁 */
+::view-transition-group(bar-top),
+::view-transition-group(bar-bottom) {
+  animation: none;
+  z-index: 100;
+}
+
+::view-transition-old(bar-top),
+::view-transition-old(bar-bottom) {
+  display: none;
+}
+
+::view-transition-new(bar-top),
+::view-transition-new(bar-bottom) {
+  animation: none;
+}