自助建站

用几行原生JS就可以实现丝滑的元素过渡效果!

发布日期:2021-12-21 00:00   来源:未知   阅读:

  大家好,我是 ConardLi ,今天来给大家讲一个网页体验优化的小技巧。

  做过体验优化的朋友应该都清楚,如果用原生的 CSS 或者 JS 动画去实现,想要实现出类似的效果,不会特别简单,而且也要考虑性能问题。

  本项提案的灵感来自于 Material Design(设计届的天花板) 中的过渡效果。

  你可以打开下面这个网站来看一个演示示例(注意一定要打开上面提到的实验 flag,不然没有效果):

  过渡的页面会失去动画效果:过渡的页面会被捕获为单个帧,如果被过渡的元素上有一些 gif 或者 CSS 动画,可能会失效。转换对整个文档生效:你还不能将过渡限制为某些内部 UI。澳门最快开奖现场结果,对过渡控制有限:现在还没法控制过渡的长度、透明度或者其他属性,未来可能会支持。注意,你一旦调用了 documentTransition.prepare() ,后面做的所有 DOM 的更改都不会立即生效,浏览器会进行延迟渲染,直到后面的 documentTransition.start() 被调用。

  你还可以指定一组特定的元素进行过渡,可以参考下面的效果(加了过渡状态的 preact 官网):

  我们可以通过指定 sharedElements 这个属性来实现共享元素过渡:

  我觉得这个功能还是非常 nice 的,希望它尽早结束试用,在稳定版和我们见面。BlueStacks Mac版