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

Question

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

Answer 1

基于@Hubert OG 的代码和这篇博文中的一个想法，我为 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 @

Answer 2

这是一个简单的眨眼。动画背景颜色需要额外的库，请参阅jQuery animate backgroundColor。

var pulseNode = function(node) {
    if(!node.style) return;
    var prev = node.style['background-color'] || 'rgba(255,0,0,0)';
    $(node).css('background-color', 'red');
    setTimeout(function() {
      $(node).css('background-color', prev);
    }, 1000);            
};

pulse = function(template) {
    for(var node = template.firstNode; true; node = node.nextSibling) {
        pulseNode(node);
        if(node === template.lastNode) return;
    }
}

现在，对于您要使用的每个模板，执行

Template.asdf.rendered = function() {
    pulse(this);
}