rrweb
rrweb copied to clipboard
[feature request]: Record/replay css animation's `currentTime`
Preflight Checklist
- [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.
What package is this bug report for?
rrweb
Version
2.0.0-alpha.13
Expected Behavior
When I use checkoutEveryNms: 2000 for recording, if the content being recorded contains animation, then every 2s this animation will be triggered repeatedly during playback. However, it works normally if checkoutEveryNms are not used.
Actual Behavior
When I use checkoutEveryNms: 2000 for recording, if the content being recorded contains animation, then every 2s this animation will be triggered repeatedly during playback. However, it works normally if checkoutEveryNms are not used.
Steps to Reproduce
<template>
<div id="container" style="display: flex">
<div
id="container2"
style="border: 1px solid; width: 800px; height: 600px"
></div>
<div
v-if="showTable"
class="animate__animated animate__fadeInUp"
>animate__fadeInUp
animate__fadeInUp
animate__fadeInUp</div>
<div>
<button @click="showTable=true">Show</button>
<button @click="rePlay">Replay</button>
</div>
</div>
</template>
<script setup>
import * as rrweb from 'rrweb';
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
import { onMounted, ref } from 'vue';
import 'animate.css';
const showTable=ref(false);
let events = [];
onMounted(() => {
_initRecorder();
});
const _initRecorder = () => {
rrweb.record({
checkoutEveryNms: 2000,
emit(event) {
events.push(event);
},
});
}
const rePlay = () => {
const replayer =new rrwebPlayer({
target: document.getElementById('container2'),
props: {
events,
},
});
};
</script>
Testcase Gist URL
https://rrwebdebug.com/play/index.html?url=https%3A%2F%2Fgist.github.com%2Fmhy17376555322%2F775375301a91079cc13a0e06dc44eafe&version=2.0.0-alpha.13&virtual-dom=on&play=on
Additional Information
No response