英文:
View transitions api does not fade when using all: unset
问题
使用Vue项目中的过渡API时，例如：
document.startViewTransition(() => {
router.push({name: 'Index'})
});
这样可以正常工作，每个页面都会以淡入淡出的效果进行过渡。
然而，我已经使用了如下的CSS重置：
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
all: unset 导致视图过渡仅在我指定名称的元素上工作，这意味着默认的淡入淡出效果不再起作用。
所以我的问题是，如何恢复默认的视图过渡属性？
我已经尝试了各种组合的新CSS语法，如下所示：
*::view-transition-old(),
*::view-transition-new() {
animation-duration: 0.5s;
}
但到目前为止都没有奏效。
英文:
When using the transitions API in a vue project for example:
document.startViewTransition(() => {
router.push({name: 'Index'})
});
This works correctly and every page transitions with a fade effect.
However, I have used a CSS reset like so:
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
The all: unset causes the view transitions to only work on elements where I specify a name, meaning the default fade no longer works.
So my question is, how do I reinstate the default view transition properties?
I have tried various combinations of the new CSS syntax like so:
*::view-transition-old(),
*::view-transition-new() {
animation-duration: 0.5s;
}
But nothing has worked so far.
答案1
得分: 1
你可以从重置中排除视图转换。
*:where(:not(iframe, canvas, img, svg, video, ::view-transition):not(svg *, symbol *)) {
all: unset;
display: revert;
}
英文:
You could exclude the view transition from your reset.
*:where(:not(iframe, canvas, img, svg, video, ::view-transition):not(svg *, symbol *)) {
all: unset;
display: revert;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论