vue实现大屏下方通知公告

文章目录

• 概要
• 实现
• 小结

概要

首先我们需要一个容器放置通知的内容id为notification-container，他的宽度为当前需要滚动的屏幕宽度，id为notification的盒子则负责放置通知的内容，当他大于屏幕宽度时，我们的x轴平移长度则应为屏幕的宽度，因为要保持初始化的时候，通知的内容是从屏幕的最右侧开始平移。

所以我们的动效translateX的值不是100%，而是container的宽度。

并且我们的动画效果持续时间要根据字数的长度决定。

实现

HTML部分代码:

<div class="container" id="notification-container">
    <div class="notification" id="notification">
      <span v-for="(notify,index) in notificationList" :key="index">{{notify}}</span>
    </div>
</div>

CSS部分代码:

@keyframes scroll-left {
  0% {
    transform: translateX(var(--scroll-width,100%));
  }
  100% {
    transform: translateX(-100%);
  }
}
#notification{
  display: inline-block;
  animation: scroll-left var(--animation-duration, 20s) linear infinite;
  line-height: 45px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 300;
  color: #fffaf9;
  font-size: 20px;
}

js部分代码：

data() {
    return {
        notificationArr:['通知1','通知2','通知3'],
        notificationList:[],
    }
},
created(){
    this.setNotificationMove()
},
methods: {
    setNotificationMove(){
      this.notificationList = this.notificationArr.map((item, index) =>"【" + (index + 1) + "】" + item);
      let lengths = this.notificationList.map(item => item.length)
      let duration = lengths.reduce((a, b) => a + b) * 0.2 + 's'
      const notification = document.getElementById('notification');
      const notificationContainer = document.getElementById('notification-container');
      let notificationWidth = notificationContainer.offsetWidth;
      notification.style.setProperty('--animation-duration', duration);
      // 设置当前宽度为外部盒子宽度
      notification.style.setProperty('--scroll-width', notificationWidth + 'px');
    }
}

小结

优化部分：可以将多条通知循环接替滚动而不是拼为同一条滚动消息进行滚动。

优化后文章：vue实现多条通知公告循环播报