vue 3 CSS 무한 틈새 없 는 스크롤 효과 구현
template
이중 div 내장,스크롤 표시 숨 기기
<div class="list-container">
<div class="marquee" id="carList">
<template v-for="(item, index) in dataMap.list" :key="index">
<div class="list-item">
<div class="item-name text-overflow">{{ item.name }}</div>
<div class="item-road text-overflow">{{ item.road }}</div>
</div>
</template>
</div>
</div>dom 요소 의 내용 을 복사 하여 이전 스크롤 효 과 를 연결 합 니 다.
export default defineComponent({
setup() {
const dataMap = reactive({
list: [
{ name: ' A89268', road: ' 8 ', status: 0 },
{ name: ' A89268', road: ' 8 ', status: 0 },
{ name: ' A89268', road: ' 8 ', status: 1 },
{ name: ' A89268', road: ' 8 ', status: 0 },
{ name: ' A89268', road: ' 8 ', status: 1 },
{ name: ' A89268', road: ' 1 ', status: 0 },
],
});
onMounted(() => {
const marquee = document.getElementById('carList');
marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
});
}
})CSS 필기 애니메이션 효과
.list-container {
width: 720px;
height: 170px;
margin-left: 13px;
overflow: hidden;
position: relative;
}
//
.marquee {
//animation-delay: -5s;
animation: marquee 15s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-51%); // -100%！
}
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
내 새 책,오픈 소스 관리 시스템, vue-bag-adminvue-bag-admin，use Vue3+Vite2.6+TypeScript+ant-design-vue，Provide the basic framework, quickly build enterprise-level bac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
