长按实现文字颜色逐渐变化

image.png

需求是实现上图，长按下方中国结，将文字由灰色变红色

 <div class="bg-img">
      <img src="../../static/images/nzhd/bg-grid@2x.png" class="grid" alt="" v-if="!isShow">
      <img src="../../static/images/nzhd/bg-red@2x.png" class="grid" alt="" v-if="isShow">
      <div id="red">
        <img src="../../static/images/nzhd/bg-red@2x.png" alt="">
      </div>
    </div>
    <div class="btn" v-if="!isShow" @touchstart="gotouchstart" @touchend="gotouchend"></div>

直接上代码
上面两个img标签是指灰色的文字图片和红色的文字图片。将红色图片绝对定位和灰色图片位置一样 盖在灰色文字上方、并将红色字体图片的宽度设为0

   gotouchstart() {
            let that = this
            clearTimeout(timeOutEvent) //清除定时器
            timeOutEvent = 0
            var node1 = document.querySelector('#red')
            node1.style.width = '14.21875rem'
            timeOutEvent = setTimeout(function() {
                //执行长按要执行的内容，
                that.isShow = true
            }, 3000) //这里设置定时
        },
        //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        gotouchend() {
            clearTimeout(timeOutEvent)
            if (timeOutEvent !== 0) {
                var node1 = document.querySelector('#red')
                node1.style.width = '0px'
                //这里写要执行的内容（尤如onclick事件）
            }
        },

如果长按3秒以上，则将红色文字图片的宽度设为和灰色一样大，并加个动画，中间取消长按，再将红色文字图片宽度设为0
css代码如下

 .bg-img {
    position: relative;
    width: 14.21875rem;
    height: 2.78125rem;
    margin: 1.90625rem auto 0;
  }
  .grid {
    width: 14.21875rem;
  }
  #red {
    position: absolute;
    width: 0px;
    height: 2.78125rem;
    top: 0;
    left: 0;
    overflow: hidden;
    transition: all 3s;
  }
  #red img {
    width: 14.21875rem;
  }