Heim > Artikel > Web-Frontend > So implementieren Sie den automatischen Scrolleffekt des versteckten Auswahlrahmens, wenn der Text in Vue zu lang ist
In den letzten Jahren sind mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie unzählige neue und praktische Spezialeffekte entstanden. Darunter ist ein spezieller Text-Scroll-Effekt, der auch als automatisches Scrollen bekannt ist und sich nach und nach zu einer der gängigen Funktionen in vielen Websites und Anwendungen entwickelt.
Vue.js ist eine sehr beliebte Wahl unter Front-End-Frameworks. In diesem Artikel erfahren Sie, wie Sie in Vue den automatischen Scrolleffekt erzielen, bei dem der Text ausgeblendet wird, wenn der Text zu lang ist.
1. Grundprinzip
Das Prinzip des Marquee-Effekts ist sehr einfach: Platzieren Sie den Text in einem festen Container. Wenn die Länge des Texts die Längenbeschränkung des Containers überschreitet, wird der Textcontainer in den Positionierungsmodus versetzt Der Text wird durch Animation animiert und bewegt sich nach links, um einen Marquee-Effekt zu erzielen.
Beim Realisieren des Marquee-Effekts müssen wir Folgendes tun:
Zweitens: Definieren Sie zunächst zwei Container in HTML bzw. Ein Container zum Anzeigen von Text und ein Container zum Umbrechen von Text.
<div class="scroll-container"> <div class="text-container"> 这是需要被滚动的内容 </div> </div>
.scroll-container { position: relative; height: 50px; overflow: hidden; } .text-container { position: absolute; left: 0; top: 0; white-space: nowrap; }
Als nächstes müssen wir vue.js verwenden, um Animationseffekte zu erzielen. In der Vue.js-Vorlage fügen wir dem Container, der den Text umschließt, ein „Übergangs“-Attribut hinzu und setzen den Animationseffekt von „links“ auf „-100 %“.
<template> <div class="scroll-container"> <div class="text-container" :style="{left: position + '%'}"> 这是需要被滚动的内容 </div> </div> </template> <style> .scroll-container { position: relative; height: 50px; overflow: hidden; } .text-container { position: absolute; left: 0; top: 0; white-space: nowrap; transition: left 5s linear; } </style> <script> export default { data () { return { position: 0 } }, mounted () { setInterval(() => { this.position -= 100; if (this.position < -100) { this.position = 0; } }, 5000) } } </script>
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den automatischen Scrolleffekt des versteckten Auswahlrahmens, wenn der Text in Vue zu lang ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!