添加/刷新后，vue组件的高亮和淡入淡出效果

Posted 2023-02-23

【中文标题】添加/刷新后，vue组件的高亮和淡入淡出效果

【英文标题】：HIghlight and fade effect for vue component as soon as added/refreshed

【发布时间】：2018-10-10 06:59:48

【问题描述】：

如何在加载后立即在 vue 组件上实现高亮效果并在一段时间后淡出效果。也许 5 秒后。

当您发布问题或提交答案等时，可以在堆栈溢出中找到此行为。

我尝试了如下 vue sn-p 所示的哔声效果，它每 500 毫秒闪烁一次：

<template>
  <div>
    <div class="row" style="height:300px;" :class="'highlightBody': highlight, 'highlightBeep': highlight && beepLight" >
      <!-- <chart-panel></chart-panel> // Will use chart component--> 
    </div>
  </div>  
</template>

<script>

export default 
  name: 'hightlight-div',
  data () 
    return 
      highlight: true,
      beepLight: false,
    
  ,
  mounted () 
    this.$nextTick(() => 
      let ct = 0
      let interval = setInterval(() => 
        if (ct === 10) 
          clearInterval(interval)
          interval = null
          this.highlight = false
        
        this.beepLight = !this.beepLight
        ct++
      , 500)
    )
  
  

</script>

<style lang="scss" scoped>
.highlightBody 
  background: #fffbe9 !important;
  border: 1px solid #dcc76a;


.highlightBeep 
  background: #F5F5F5 !important;

</style>

但我想要类似于 stack-over flow 的效果（从深色背景淡入淡色）。

我必须在不使用 Jquery 的情况下实现此行为。 任何建议都将不胜感激。

【问题讨论】：

你试过什么？请用您的代码向我们展示一个基本的、最小的示例。见how to ask 和how to create a minimal, concrete and verifiable example (MCVE)。

@Terry 我已经更新了我的基本代码。请看一下。

【参考方案1】：

我可以用下面的 sn-p 解决渐隐效果和哔哔声效果：

<template>
  <div>
    <div class="row" :class="'highlightBody': !beepLight, 'highlightBeep': beepLight"  style="height:300px;" >
      Beep
    </div>
    <div class="row" style="height:300px;" :style="`background: #$highlightColor !important;`" >
      Fede Away
    </div>
  </div>
</template>

<script>

function colorShades (color, percent) 
  var num = parseInt(color, 16)
  var amt = Math.round(2.55 * percent)
  var R = (num >> 16) + amt
  var B = (num >> 8 & 0x00FF) + amt
  var G = (num & 0x0000FF) + amt

  return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1)


export default 
  name: 'hightlight-div',
  data () 
    return 
      beepLight: false,
      highlightColor: 'ffff94'
    
  ,
  mounted () 
    this.$nextTick(() => 
      let ct = 0
      let interval = setInterval(() => 
        this.highlightColor = colorShades('ffff94', ct * 4)
        this.beepLight = !this.beepLight
        ct++
        if (ct === 10) 
          clearInterval(interval)
          interval = null
          this.highlightColor = 'ffffff'
        
      , 500)
    )
  
  

</script>

<style lang="scss" scoped>
.highlightBody 
  background: #fffbe9 !important;
  border: 1px solid #dcc76a;


.highlightBeep 
  background: #fffbe9 !important;

</style>

您可以查看jsfiddle