#优质博文 #CSS #动画 #前端In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画

1. 5小时前

   Forwarded from cosine - 前端人の日常频道

   #优质博文 #CSS #动画 #前端
   In-N-Out Animations: Popovers (Part 2/3) | Master.dev：利用 CSS 新特性给 Popover API 元素添加平滑的进出场动画。
   
   

   AI 摘要：文章展示了如何将 Dialog 动画的“3-2-1”级联规则（利用 @starting-style 和 :popover-open）复用到原生 popover 上，实现从 display: none 展开时的平滑过渡。此外还介绍了针对 prefers-reduced-motion 的减弱动画适配，以及解决 Safari 浏览器在退场动画中丢失锚点定位的兼容小妙招。

   Toggle hidden content

   
   
   In-N-Out Animations: View Transitions (Part 3/3) | Master.dev：使用 View Transitions API 优雅解决 DOM 节点真实增删时的进出场动画难题。
   
   

   AI 摘要：针对元素在 DOM 中真正被创建或销毁时（传统动画的 Hard Mode）的退场动画，文章介绍了使用 View Transitions API 的解决方案。通过 document.startViewTransition 结合 ::view-transition-new() / ::view-transition-old() 和 @keyframes，即可用极简的代码实现极其丝滑的淡入淡出及位移效果。

   Toggle hidden content

   master.dev

   

   In-N-Out Animations: Popovers (Part 2/3)

   Using our 3, 2, 1 state system, we can make popovers animate on