rrweb icon indicating copy to clipboard operation
rrweb copied to clipboard

[feature request]: Record/replay css animation's `currentTime`

Open oceanMa1 opened this issue 1 year ago • 6 comments

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

oceanMa1 avatar Jun 04 '24 05:06 oceanMa1