vue3使用平移+过渡实现消息滚动，鼠标移入停止移出继续（动画动态设置偏移量太麻烦，定时器性能太差）

模板代码

外面的div用来限定显示宽度和隐藏超出区域，里面的span让文本把宽度撑起来

<div style="overflow: hidden;white-space: nowrap;">
<span :style="messageViewStyle"ref="messageView">{{ message }}</span>
</div>

js代码

获取文本盒子对象，比较它的宽度与它父盒子的宽度，宽度小于父盒子消息就不用滚动，宽度大于父盒子就给文本盒子绑上移入、移出、过渡结束事件和动态修改它的样式，给自己的innerText翻个倍，让它平移自己宽度的身位，设置计算过渡时间（字越多过渡时间越长），在过渡结束事件里重新设置平移开始新的过渡，在移入事件里重新设置平移和设置过渡延迟（只要够大就是暂停），在移出事件里重新设置平移和移除延迟

import { onMounted, ref } from 'vue'

const message = ref('')
message.value =
	'-------------------------------------------------------考试成绩公式：2023年第一批次考核成绩公式，公式时间截止：2023年9月24日18点30分------------------------------------------------------------------------------------------------------------------'
const messageView = ref(null)
const messageViewStyle = reactive({
	display: 'inline-block',
	cursor: 'pointer'
})
let nowStatus = 0
let offset = 0
let time
const stopTransition = () => {
	messageViewStyle['transform'] = `translateX(0px)`
	messageViewStyle['transition-delay'] = `100000s`
}
const conTransition = () => {
	messageViewStyle['transition-delay'] = `0s`
	messageViewStyle['transform'] = `translateX(${nowStatus}px)`
}
onMounted(() => {
	if (messageView.value.parentNode.offsetWidth < messageView.value.offsetWidth) {
		offset = 0 - messageView.value.offsetWidth
		messageView.value.innerText = message.value + message.value
		nowStatus = offset
		messageViewStyle['transform'] = `translateX(${nowStatus}px)`
		time = Math.floor(-offset / 60)
		messageViewStyle['transition-property'] = `transform`
		messageViewStyle['transition-duration'] = `${time}s`
		messageViewStyle['transition-timing-function'] = 'linear'
		messageView.value.addEventListener('mouseenter', stopTransition)
		messageView.value.addEventListener('mouseout', conTransition)
		messageView.value.addEventListener('transitionend', () => {
			if (nowStatus != 0) {
				messageViewStyle['transition-duration'] = `1ms`
				nowStatus = 0
			} else {
				messageViewStyle['transition-duration'] = `${time}s`
				nowStatus = offset
			}
			messageViewStyle['transform'] = `translateX(${nowStatus}px)`
		})
	}
})

总结

主要是过渡的特性就是尽管一个元素处于过渡状态中，新的过渡动画也会立即从当前样式开始，而不是直接跳转到 CSS 的最终状态。