Vue menyedari kesan menatal teks menegak

Untuk melaksanakan kesan menatal teks menegak di VUE, anda perlu menentukan gaya kontena (.verical-scroll-container) untuk menatal menegak, dan menetapkan sifat ketinggian dan limpahannya. Mendefinisikan gaya (.verical-scroll-content) kandungan teks, meletakkannya secara mutlak, dan memulakan kedudukannya di bahagian atas. Gunakan animasi peralihan dalam komponen VUE untuk menentukan kesan animasi pergerakan kandungan teks. Gunakan CSS untuk menentukan kesan peralihan (.verical-scroll-enter-active dan .vertical-scroll-leave-active), dan tetapkan masa peralihan dan jenis peralihan.

Vue menyedari kesan menatal teks menegak

Untuk mencapai skrol teks menegak di VUE, anda perlu menggunakan fungsi animasi peralihan CSS dan VUE.

CSS

Pertama, gunakan CSS untuk menentukan gaya kontena menatal menegak:

 <code class="css">.vertical-scroll-container { height: 500px; /* 容器高度*/ overflow: hidden; position: relative; }</code>

Kemudian, tentukan gaya kandungan teks:

 <code class="css">.vertical-scroll-content { position: absolute; top: 0; /* 初始位置*/ height: 100%; white-space: nowrap; }</code>

Animasi Peralihan Vue

Seterusnya, dalam komponen VUE, gunakan animasi transition untuk mengawal pergerakan kandungan teks:

 <code class="vue"><template> <div class="vertical-scroll-container"> <transition name="vertical-scroll"> <div class="vertical-scroll-content">{{ text }}</div> </transition> </div> </template> <script> import { ref } from &#39;vue&#39; export default { setup() { const text = ref(&#39;垂直滚动文本&#39;) return { text } } } </script></code>

Kesan peralihan CSS

Akhirnya, gunakan CSS untuk menentukan kesan peralihan:

 <code class="css">.vertical-scroll-enter-active, .vertical-scroll-leave-active { transition: top 1s ease-in-out; } .vertical-scroll-enter-from { top: 100%; /* 从顶部进入*/ } .vertical-scroll-leave-to { top: -100%; /* 离开到底部*/ }</code>

Kesan berjalan

Vue mencetuskan animasi peralihan apabila data text berubah. Kandungan teks akan memasuki bekas dari bahagian atas, kemudian tatal ke bawah, dan akhirnya meninggalkan bekas dari bahagian bawah.

Perkara yang perlu diperhatikan

• Pastikan bekas cukup besar untuk memegang semua kandungan teks.
• Nilai top dan masa peralihan boleh diselaraskan seperti yang diperlukan untuk menyesuaikan kesan menatal.

Atas ialah kandungan terperinci Vue menyedari kesan menatal teks menegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!