keyframes 動態translateX:

html:

<div class="marquee-container">
<div ref="marquee" class="marquee-content">
<div v-show="showMarquee" v-for="(announcement, index) in marqueeData" :key="announcement.id" class="marquee-item">{{
announcement.content }}</div>
</div>
<div class="more"><router-link :to="{ name: RouteConst.ROUTE_MESSAGES_PAGE }">更多</router-link></div>
</div>

js:

const marquee = ref<HTMLElement | null>(null);
 
const animationDuration = contentWidth / 10;
const translatexDynamic = ((marqueeData.value.length-1) * -100) + '%'
 
marquee.value.style.setProperty('--animation-duration', `${animationDuration}s`);
marquee.value.style.setProperty('--marquee-translate', translatexDynamic);

less:

@keyframes marquee {
0% {
transform: translateX(100%);
}
 
100% {
transform: translateX(var(--marquee-translate));
}
}
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 MonkeyJ 的頭像
    MonkeyJ

    程式猴

    MonkeyJ 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄