模板代码
外面的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 的最终状态。