This is working, but the duration setting is ignored. What am I missing?
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>
As mentioned by @Yogi:
Changing
transition-duration: 5s;
toanimation-duration: 5s;
seems to work.
In general, transition-duration
is used between two distinct states (start/end), while animation-duration
involves a sequence of keyframes. When you're trying to trigger the animation on click, the use of animation-duration
should be used.