Vue 實現垂直文字滾動效果-Vue.js-PHP中文網

首頁

web前端

Vue.js

Vue 實現垂直文字滾動效果

Johnathan Smith

Apr 07, 2025 pm 10:36 PM

css vue ai overflow

Vue中實現垂直文字滾動效果需要如下步驟：定義垂直滾動的容器樣式（.vertical-scroll-container），並設置其高度和溢出屬性。定義文本內容的樣式（.vertical-scroll-content），將其定位絕對，並在頂部初始化其位置。在Vue組件中使用transition過渡動畫，定義文本內容移動的動畫效果。使用CSS定義過渡效果（.vertical-scroll-enter-active和.vertical-scroll-leave-active），設定過渡時間和過渡類型。

Vue 實現垂直文字滾動效果

Vue 實現垂直文字滾動效果

Vue 中實現垂直文字滾動效果需要使用CSS 和Vue 的過渡動畫功能。

CSS

首先，使用CSS 定義垂直滾動的容器樣式：

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

然後，定義文本內容的樣式：

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

Vue 過渡動畫

接下來，在Vue 組件中，使用transition過渡動畫控製文本內容的移動：

 <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>

CSS 過渡效果

最後，使用CSS 定義過渡效果：

 <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>

運行效果

當text數據發生變化時，Vue 將觸發過渡動畫。文字內容將從頂部進入容器，然後向下滾動，最後從底部離開容器。

注意事項

確保容器高度足夠大以容納所有文本內容。
可以根據需要調整top值和過渡時間以定制滾動效果。

以上是Vue 實現垂直文字滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1596

276

Related knowledge

加密貨幣IDO平台top5 Aug 21, 2025 pm 07:33 PM

2025年最佳IDO平台為pump.fun、Bounce、Coin Terminal、Avalaunch和Gate Launchpad，分別適合Meme幣投機、社區驅動拍賣、高回報追求、Avalanche生態投資及新手公平參與，選擇需結合投資目標、風險承受力與項目偏好，注重平台審核與安全性。

什麼是Polkadot（DOT幣）？ DOT未來發展及價格預測 Aug 21, 2025 pm 07:30 PM

目錄DOT（波卡幣）是什麼？ Polkadot的起源DOT（波卡幣）的3大用途Polkadot的運作原理波卡幣擁5大特色，旨在建立波卡生態系(Ecosystem)1.互操作性2.可擴展性3.社區自治4.無分叉升級5.NPOS共識協議Polkadot的關鍵特性DOT生態系統Polkadot的願景：連接一切Polkadot的未來發展Polkadot價格預測Polkadot2025年價格預測Polkadot2026-203

加密貨幣空投信息聚合的網站有哪些 Aug 21, 2025 pm 07:36 PM

加密貨幣空投信息聚合網站包括Airdrop Alert、One Click Airdrop Tracker、Free Airdrop.io和CoinMarketCap空投板塊，這些平台整合全網空投項目，提供分類篩選、任務指引和參與進度跟踪等功能，幫助用戶高效獲取免費代幣。

主流比特幣交易app排行榜全球用戶量八大比特幣交易app榜單 Aug 21, 2025 am 08:54 AM

加密資產交易平台是連接用戶與數字貨幣的關鍵樞紐，文章介紹了Binance、OKX、gate.io、火幣、KuCoin、Kraken、BITFINEX和Bitstamp等全球主流平台。這些平台在用戶量、交易量、安全性、流動性及服務多樣性方面表現突出，覆蓋現貨、衍生品、DeFi、NFT等多種業務，滿足不同用戶需求，推動了數字資產在全球範圍內的普及與發展。

wlfi代幣上交易所了嗎 Aug 21, 2025 am 09:18 AM

WLFI代幣目前尚未確認上線主流中心化交易所，投資者需通過官方渠道或CoinMarketCap、CoinGecko等平台核實其上市狀態，若未上線，則可能僅在Uniswap、PancakeSwap等去中心化交易所（DEX）交易，用戶可通過MetaMask等Web3存儲連接DEX，輸入官方獲取的合約地址進行交易，操作時需注意滑點容差與安全風險；未來WLFI能否上線中心化交易所取決於項目基本面、社區活躍度、流動性及合規性等因素，項目方需積極對接交易所並滿足審核要求，而Binance、OKX、Huobi

wlfi代幣多少錢一個 Aug 21, 2025 am 09:15 AM

WLFI是LendFlare平台的治理代幣，基於Convex Finance構建，用於優化Curve和Convex上的收益 farming。其價格受加密市場整體行情、平台TVL、治理與質押機制、供需關係及競爭環境影響。投資者可通過CoinGecko、CoinMarketCap或Uniswap等平台查詢實時價格，並通過Binance、OKX、Huobi等主流交易所購買USDT後，提現至支持WLFI交易的平台進行兌換，操作時需注意網絡一致性和地址準確性，避免資產損失。

如何使用CSS創建玻璃塑料效應 Aug 22, 2025 am 07:54 AM

要創建CSS的玻璃擬態效果，需使用backdrop-filter實現背景模糊，設置半透明背景如rgba(255,255,255,0.1)，添加細微邊框和陰影以增強層次感，並確保元素背後有足夠視覺內容；1.使用backdrop-filter:blur(10px)模糊背景內容；2.採用rgba或hsla定義透明背景控制通透程度；3.添加1pxsolidrgba(255,255,255,0.3)邊框及box-shadow提升立體感；4.確保容器具有豐富背景如圖片或紋理以呈現模糊穿透效果；5.為兼容舊瀏