vue 实现一个简易的跑马灯效果

最新推荐文章于 2026-04-22 11:05:15 发布

原创最新推荐文章于 2026-04-22 11:05:15 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

前端专栏收录该内容

5 篇文章

订阅专栏

博客主要对比了Vue2.0和Vue3.0，分别从dom部分、核心逻辑和样式方面进行阐述，为前端开发者了解这两个版本的差异提供了参考。

vue2.0

dom部分

<template>
      <ul class="info" @mouseenter="enterhandle" @mouseleave="leavehandle">
        <li
          v-for="(item, index) of listData"
          :key="index"
          :class="['title', pmdAnimate ? 'pmd-animate' : '']"
        >
        {{ item.value }}
        </li>
      </ul>
</template>

核心逻辑

<script>
export default {
  name: '',
  data () {
    return {
      listData: [
        {
          value: 'test'
        },
        {
          value: 'test'
        },
        {
          value: 'test'
        },
        {
          value: 'test'
        }
      ], // 渲染用列表
      pmdAnimate: false, // 切换时的动画
      pmdTimer: null // 计时器
    }
  },
  mounted () {
    this.pmdTimer = setInterval(this.setPmdAnmiate, 3000)
  },
  methods: {
    setPmdAnmiate () {
      this.pmdAnimate = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.pmdAnimate = false
      }, 500)
    },
    enterhandle () {
      if (this.pmdTimer) {
        clearInterval(this.pmdTimer)
        this.pmdTimer = null
        this.pmdAnimate = false
      }
    },
    leavehandle () {
      if (!this.pmdTimer) {
        this.pmdTimer = setInterval(this.setPmdAnmiate, 3000)
      }
    }
  }
}
</script>

样式

.info {
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #99c3d4;
      position: relative;
      .pmd-animate {
        transition: all ease .5s;
        transform: translateX(-100%); // 左移动画 想要实现不同的跑马灯动画就修改transform
      }
      .value {
        color: #0091ff;
        font-family: D7;
      }
    }

vue3.0

dom部分

<template>
    <div class="cssy-right-continer">
        <ul class="info" @mouseenter="enterhandle" @mouseleave="leavehandle">
        <li
          v-for="(item, index) of listData"
          :key="index"
          :class="['title', pmdAnimate ? 'pmd-animate' : '']"
        >{{ item.value }}</li>
      </ul>
    </div>
</template>

核心逻辑

<script setup lang="ts">
interface listDataTypes {
  value: string
}
const listData = reactive<listDataTypes[]>([
  {
    value: 'test'
  },
  {
    value: 'test'
  },
  {
    value: 'test'
  }
])
const pmdAnimate = ref<boolean>(false)
const pmdTimer = ref<number | undefined>(0)
onMounted(() => {
  pmdTimer.value = window.setInterval(setPmdAnmiate, 3000)
})
const setPmdAnmiate = () => {
  pmdAnimate.value = true
  setTimeout(() => {
    listData.push(listData[0])
    listData.shift()
    pmdAnimate.value = false
  }, 500)
}
const enterhandle = () => {
  if (pmdTimer.value) {
    clearInterval(pmdTimer.value)
    pmdTimer.value = 0
    pmdAnimate.value = false
  }
}

const leavehandle = () => {
  if (!pmdTimer.value) {
    pmdTimer.value = window.setInterval(setPmdAnmiate, 3000)
  }
}
</script>

样式

.cssy-right-continer {
  width: 100%;
  height: vh(200);
  background: #fff;
    overflow: hidden;
    .info {
    width: 100%;
    height: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #99c3d4;
    position: relative;
    li {
      display: inline-block;
      width: 100%;
    }
    .pmd-animate {
      transition: all ease .5s;
      transform: translateX(-100%);
    }
  }
}