<script setup>
import { getKeyFramesGroup } from "jsview";
import { onBeforeUnmount } from "vue";

const itemStyle = {
  top: 20,
  left: 20,
  width: 60,
  height: 60,
  fontSize: 15,
  color: "rgba(255, 255, 0, 1)",
  backgroundColor: "rgba(255, 0, 0, 1)",
};

// 单纯的放大动画使用贝塞尔的timingFunction成为心跳效果
const cP1 = [0.42, 3.96];
const cP2 = [0.62, 0];
const sScaleUpTs = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) infinite`;

// 暂时不暴露fill-mode = forwards接口
// const sScaleUpOnce = `BasicAnim_PumpUp 0.8s cubic-bezier(${cP1[0]}, ${cP1[1]}, ${cP2[0]}, ${cP2[1]}) 3 forwards`;

// 拿取group句柄
const styleShell = getKeyFramesGroup();

// 动态注入规则, 注意 keyFrame 名称是全局的, 不要重名
styleShell.insertRule(
  "@keyframes BasicAnim_PumpUp \
    {from {transform: scale3d(1, 1, 1);} \
    to {transform: scale3d(1.2, 1.2, 1);}}"
);

// keyFrame 注意unmount时的销毁
onBeforeUnmount(() => {
  styleShell.removeRule("BasicAnim_PumpUp");
});
</script>

<template>
  <div id="layout-root">
    <div :style="{ ...itemStyle, animation: sScaleUpTs }">
      {{ "心跳\n效果" }}
    </div>
    <!-- <div
      :style="{
        ...itemStyle,
        left: 100,
        animation: sScaleUpOnce,
      }"
    >
      {{ "心跳\n效果2" }}
    </div> -->
  </div>
</template>

<style></style>
