动画注入到iframe文档中的数字

Question

我有一个用于构建电子邮件和报告电子邮件中链接上的点击数据的应用程序。我正在将电子邮件加载到iframe中，并将每个链接的点击统计信息注入iframe中。如果可能的话，我想为每个数字设置从零到所需数字的动画。

有人知道我可以这样做吗？这里是JSFiddle。

<div id="mailing-preview" :class="{'large': size == 'large'}">
    <div class="iframe-container">
    <iframe :ref="iframeRef" src="about:blank" id="mailing-content-preview" sandbox="allow-same-origin" scrolling="no" width="100%" height="100%" @load="iframeLoaded" ></iframe>
</div>

new Vue({
  el: "#mailing-preview",
  data() {
    return {
      iframeRef: "preview-iframe"
    };
  },
  methods: {
    updatePreview(newHtml) {
      const contentWindow = this.$refs[this.iframeRef].contentWindow;
      contentWindow.document.open("text/html", "replace");
      contentWindow.document.write(newHtml);
      contentWindow.document.close();
    },
   iframeLoaded() {
     this.addStasticBalloons();

   if (this.dynamicHeight) {
    const iframe = this.$refs[this.iframeRef];
    const contentWindow = iframe.contentWindow;
    const iframeHeight = contentWindow.document.body.scrollHeight;
    if (iframeHeight > 0) {
      iframe.setAttribute("style", "height:100%;");
      iframe.style.height = iframeHeight + "px";
    }
  }
},
addStasticBalloons() {
    const iframe = this.$refs[this.iframeRef];
    var markedAnchors = {};

    this.mailing.clickThroughRates.forEach(stat => {
      var anchors = iframe.contentDocument.querySelectorAll("a[href='" + stat.url + "']");
      var currentAnchorIndex = 0;
      var percentage = (stat.clickThroughRate * 100).toFixed(1);

      if (markedAnchors[stat.url] !== undefined) {
        markedAnchors[stat.url]++;
        currentAnchorIndex = markedAnchors[stat.url];
      } else {
        markedAnchors[stat.url] = 0;
      }

      if (anchors[currentAnchorIndex] === undefined) {
        return;
      }

      var bubble = document.createElement("span");
      bubble.style.position = "absolute";
      bubble.style.top = "-38px";
      bubble.style.left = "calc(100% + 18px)";
      bubble.style.background = "#6AC049";
      bubble.style.padding = "10px";
      bubble.style.zIndex = "1";
      bubble.style.fontSize = "16px";
      bubble.style.fontWeight = "bold";
      bubble.style.color = "white";
      bubble.style.borderRadius = "10px";
      bubble.style.boxShadow = "0px 0px 4px 0px #333";
      bubble.style.whiteSpace = "nowrap";

      var line = document.createElement("span");
      line.style.background = "#6AC049";
      line.style.width = "24px";
      line.style.height = "2px";
      line.style.display = "block";
      line.style.position = "absolute";
      line.style.left = "-1.25em";
      line.style.bottom = "-0.25em";
      line.style.transform = "rotate(-35deg)";

      var bubbleContents = document.createTextNode(percentage + "%");

      bubble.appendChild(bubbleContents);
      bubble.appendChild(line);

      anchors[currentAnchorIndex].appendChild(bubble);
      anchors[currentAnchorIndex].style.position = "relative";
      anchors[currentAnchorIndex].style.overflow = "visible";
      anchors[currentAnchorIndex].style.display = "inline-block";
    });
   }
 },
 mounted() {
   this.updatePreview(this.mailing.html);
 },
 watch: {
   mailing(newMailing) {
     this.updatePreview(newMailing.html);
   }
 },
 props: {
   size: {
     type: String,
     default: "small"
   },
   dynamicHeight: {
     type: Boolean,
     default: false
 },
  mailing: {
   type: Object,
   default: function() {
     return {id:1,name:"My Favorite Mailing",html:"",clickThroughRates:[]}
   }
  }
 }
})