2 篇博文 含有标签「CSS」

最近在写一个碧蓝档案学生 Pixiv 收藏数统计的网站，想要实现两个炫酷的功能：模仿碧蓝档案游戏内什亭之匣的页面切换动画和圆形扩散的明暗主题切换动画（就像 Android 版 Telegram 那样）。

本来已经把 SVG 和动画的关键帧画好了，忽然发现一个问题，我的网站是基于 Next.js App Router 的，但是 App Router 不支持监听 Router 事件，也就是说，我并不知道下一个页面什么时候完成加载，也就没办法选择合适的时机播放页面进入的动画。

一搜 Google，千篇一律全是使用 Framer Motion 或者 React Transition Group，但是我 CSS 的 @keyframes 动画已经写好了，不想再重写一遍，难道只用纯 CSS 不能实现？

正好昨天在 MDN 上看到了 View Transitions API 的介绍，这个 API 拿来做动画是真的方便，于是去 Can I use 查了一下，发现现在只有 Chrome 支持，不过也没关系，先实现再说。

经过一番尝试，终于实现了两个动画效果，本文就来介绍一下 View Transitions API 的基本用法。

今天在 medium 看到一篇关于 Google Photos 的文章，里面详细的介绍了谷歌的一名工程师是如何设计 Google Photos 的布局的，文章地址：Building the Google Photos Web UI。

观察了一下 Google Photos 的布局，发现它的布局非常的有意思，有以下特点：

• 一行图片的宽度始终刚好占满容器宽度
• 图片全部保持原始比例，不会被拉伸
• 图片的高度不一，但是每一行的高度是一样的
• 图片顺序不会被改变

感觉很神奇，但是那篇文章里的实现方法太过复杂，虽然性能非常好，但是我觉得可以用更简单的方法来实现，于是就有了这篇文章。