css - 每次在 Meteor 中渲染时脉冲模板

Question

我希望每个模板在每次渲染时都有脉冲。有一个可视化调试工具来查看正在渲染的内容。所以我想象类似的东西，当一个模板(一小段)被渲染时，它的背景颜色被设置为红色，然后这种红色慢慢地淡入原始背景颜色或任何背景(即使它是透明的)。所以如果我看到某个东西一直是红色的，我就知道它一直在重绘。

Answer 1

基于@Hubert OG 的代码和 this blog post 的想法，我为Meteor渲染做了如下调试代码:

pulseNode = (i, node) ->
  return unless node.style

  $node = $(node)
  prePulseCss = $node.data('prePulseCss') ? node.style.cssText
  prePulseBackgroundColor = $node.data('prePulseBackgroundColor') ? $node.css('backgroundColor')
  $node.data(
    'prePulseCss': prePulseCss
    'prePulseBackgroundColor': prePulseBackgroundColor
  ).css('backgroundColor', 'rgba(255,0,0,0.5)').stop('pulseQueue', true).animate(
    backgroundColor: prePulseBackgroundColor
  ,
    duration: 'slow'
    queue: 'pulseQueue'
    done: (animation, jumpedToEnd) ->
      node.style.cssText = prePulseCss
  ).dequeue 'pulseQueue'

pulse = (template) ->
  $(template.firstNode).nextUntil(template.lastNode).addBack().add(template.lastNode).each pulseNode

_.each Template, (template, name) ->
  oldRendered = template.rendered
  counter = 0

  template.rendered = (args...) ->
    console.debug name, "render count: #{ ++counter }"
    oldRendered.apply @, args if oldRendered
    pulse @