主页 / coding / 问题 / 79201522
Accepted
Joren
Asked: 2024-11-19 05:43:14 +0800 CST

为什么 transition-duration 在该视图转换中不起作用？

  • 772

这是可行的，但持续时间设置被忽略了。我遗漏了什么？

https://jsfiddle.net/r76z0o8s/

function onClick(e) {
  e.target.classList.add('clicked_media_transition')
  document.startViewTransition(() => {
    e.target.classList.add('expand')
  })
}
body {
  margin: 0;
}

div {
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
}

.expand {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

::view-transition-group(clicked_media_transition) {
  transition-duration: 5s;
  transition-timing-function: ease-out;
}

.clicked_media_transition {
  view-transition-name: clicked_media_transition;
}
<div onclick="onClick(event)"></div>

css

1 个回答

  1. Best Answer

    正如@Yogi所说：

    改为transition-duration: 5s;似乎animation-duration: 5s;有效。

    一般来说，transition-duration在两个不同的状态（开始/结束）之间使用，而animation-duration涉及一系列关键帧。当您尝试在点击时触发动画时，animation-duration应使用。

    • 2

相关问题