is really transition animation. I don't see 3D acceleration, but will-change has
.
No annimation animation is used.
animation-play-state:paused; there are no eggs, which is probably left over from history and may have been treated by annimation in the past, so it is necessary to do so.
is it also possible that this thing has an effect on GPU acceleration? Never tested. The above is just a guess
the handling method of player on-screen comment is:
when playing, set its translateX and transform . When
pauses, write the current position as translateX , transform is 0, and the on-screen comment remains at that position. When
plays again, reset translateX and transform,. Of course, transform-duration must be calculated based on the length of the on-screen comment, the current position and the end position (player width).
the logic for playback and pause is all handled by js. When the
on-screen comment is in place, the dom is removed.
plus GPU acceleration of will-change , so it doesn't get stuck
.
< hr >
to take a look at the changes in style, the above is a little guess
< hr >
on September 5, 2018, 20-20-22-22-23, add.
after studying it, bilibili also did another operation, that is, reusing the dom, barrage will not be removed when it comes to the end. Instead, the original dom node will be reused when there is a new one, and the style, will be modified to play it again. This is also a way to improve performance
.
