当前位置：文江博客话题详情

SVG动画的真正简单延迟加载...不起作用

发布于 2025-01-29 17:36:40 字数 526 浏览 0 评论 0原文

与人们遇到的其他SVG延迟问题相比，这似乎是一个简单的问题。

我已经复制了此文本突出显示效果。

我关闭了CSS悬停以进行效果，因此它总是显示出来。

我的版本是顶部文本块内部的淡粉红色辉煌业务： https：/// leslieh7.sg-host.com/join-us-alt/

我在SVG中添加了transition-delay：3000ms; to svg，这在悬停时可行，但在页面加载时不行已经加载了。

transition-delay在SVG上使用的正确规则吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山川志 2025-02-05 17:36:40

您真的是说transition-delay吗？从您的示例中，过渡似乎更有可能。

正如您已经意识到的那样，transition-xxx属性仅适用于更改元素样式时。如果第一次渲染时已经是这种样式，那就没有变化了。

如果您希望在加载页面后播放突出显示的过渡/动画，那么您可能想使用动画而不是过渡。

类似的内容：

<div class="selected">Join us</div>

.selected {
  animation: 3s ease-in forward pinkify;
}

@keyframes pinkify {
  to { fill: pink; }
}

另外，您可以将处理程序添加到 window加载事件。在该处理程序中，将类添加到具有与悬停相同动画的第一个元素中。

这样的事情：

window.addEventListener("load", () => {
  document.getElementById("join-us").className.add("selected");
});

.selected {
  transition: 1s;
  fill: pink;
}

Did you really mean transition-delay? From your example, transition seems more likely.

As you already realised, the transition-xxx properties only apply to when you change the style of an element. If it's already that style when it is first rendered, there is no change.

If you want the highlight transition/animation to play after the page has loaded, then you probably want to use an animation rather than a transition.

Something like this:

<div class="selected">Join us</div>

.selected {
  animation: 3s ease-in forward pinkify;
}

@keyframes pinkify {
  to { fill: pink; }
}

Alternatively, you could add a handler to the Window load event. And in that handler add a class to that first element that has the same animation as the hover.

Something like this:

window.addEventListener("load", () => {
  document.getElementById("join-us").className.add("selected");
});

.selected {
  transition: 1s;
  fill: pink;
}

回复收藏 0 原文

~没有更多了~