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

【问题标题】：HIghlight and fade effect for vue component as soon as added/refreshed添加/刷新后，vue组件的高亮和淡入淡出效果
【发布时间】：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 我已经更新了我的基本代码。请看一下。

标签： javascript css vue.js vue-component

【解决方案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

【讨论】：