RollingText ローリングテキスト - Vant 4
🔢 RollingText ローリングテキスト
🎯 紹介
RollingText はテキストのローリングアニメーションを提供し、数字や任意のテキストを回転表示できます。vant バージョンは 4.6.0 以上をご利用ください。数値変化やカウント表示など、動きのある表現に適しています。
📦 導入
以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。
js
import { createApp } from'vue'; import { RollingText } from'vant'; const app = createApp(); app.use(RollingText);🎯 コード例
🎬 基本用法
もっともシンプルな数字ローリング！start-num に開始値、target-num に目標値を設定すると、自動でローリングアニメーションが再生されます。
html
<template>
<div class="demo-rolling-text">
<van-rolling-text :start-num="0" :target-num="123" />
<p>0 から 123 までローリング</p>
<van-rolling-text :start-num="100" :target-num="999" />
<p>100 から 999 までローリング</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
return {};
},
};🔄 ローリング方向の設定
direction 属性で数字のローリング方向を制御します。上方向のローリングは未来感のある表現に！
html
<template>
<div class="demo-rolling-text">
<!-- 下方向ローリング（デフォルト） -->
<van-rolling-text :start-num="0" :target-num="456" direction="down" />
<p>下方向ローリング ⬇️</p>
<!-- 上方向ローリング -->
<van-rolling-text :start-num="0" :target-num="789" direction="up" />
<p>上方向ローリング ⬆️</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
return {};
},
};⏱️ 桁ごとの停止順序
アニメーションのリズムをコントロール！stop-order 属性で各桁の停止順序を設定して、異なる視覚的リズムを作れます。
html
<template>
<div class="demo-rolling-text">
<!-- 左から右へ停止（デフォルト） -->
<van-rolling-text :start-num="0" :target-num="12345" stop-order="ltr" />
<p>高位から順に停止 ➡️</p>
<!-- 右から左へ停止 -->
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />
<p>下位から順に停止 ⬅️</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
return {};
},
};🔤 非数字コンテンツのローリング
数字以外も！text-list 属性を使って任意のテキストをローリング表示できます。独自の文字アニメーションを作りましょう。
html
<template>
<div class="demo-rolling-text">
<van-rolling-text :text-list="textList" />
<p>テキストローリングアニメーション</p>
<van-rolling-text :text-list="statusList" />
<p>ステータス切り替えアニメーション</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const textList = ref([
'Hello',
'World',
'Vant4',
'React',
'Vue3!',
]);
const statusList = ref([
'支払い待ち',
'支払い済み',
'配送中',
'完了',
]);
return {
textList,
statusList
};
},
};🎨 スタイルのカスタマイズ
CSS 変数と height 属性で、デザインに合った個性的なアニメーションを作れます。
html
<template>
<div class="demo-rolling-text">
<!-- ブルーテーマ -->
<van-rolling-text
class="blue-rolling-text"
:start-num="0"
:target-num="888"
:height="50"
/>
<p>ブルーテーマのスタイル</p>
<!-- グラデーションテーマ -->
<van-rolling-text
class="gradient-rolling-text"
:start-num="0"
:target-num="666"
:height="60"
/>
<p>グラデーションテーマのスタイル</p>
</div>
</template>css
.blue-rolling-text {
--van-rolling-text-background: #1989fa;
--van-rolling-text-color: white;
--van-rolling-text-font-size: 24px;
--van-rolling-text-gap: 6px;
--van-rolling-text-item-border-radius: 8px;
--van-rolling-text-item-width: 40px;
}
.gradient-rolling-text {
--van-rolling-text-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--van-rolling-text-color: white;
--van-rolling-text-font-size: 28px;
--van-rolling-text-gap: 8px;
--van-rolling-text-item-border-radius: 12px;
--van-rolling-text-item-width: 45px;
font-weight: bold;
}🎮 手動制御
アニメーション再生を完全にコントロール！コンポーネントインスタンスの start と reset メソッドで、必要に応じて再生できます。
html
<template>
<div class="demo-rolling-text">
<van-rolling-text
ref="rollingTextRef"
:start-num="0"
:target-num="999"
:auto-start="false"
/>
<div class="control-buttons">
<van-button type="primary" @click="start">アニメーション開始</van-button>
<van-button @click="reset">アニメーションリセット</van-button>
</div>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const rollingTextRef = ref(null);
const start = () => {
rollingTextRef.value?.start();
};
const reset = () => {
rollingTextRef.value?.reset();
};
return {
rollingTextRef,
start,
reset
};
},
};📖 API
🎛️ Props
| 属性名 | 説明 | 型 | デフォルト |
|---|---|---|---|
| start-num | 🎯 開始値（アニメーションの起点） | number | 0 |
| target-num | 🏁 目標値（アニメーションの終点） | number | - |
| text-list | 📝 コンテンツ配列（数字以外のテキストをローリング） | string[] | [] |
| duration | ⏱️ アニメーション時間（秒） | number | 2 |
| direction | 🔄 ローリング方向（down/up） | string | down |
| auto-start | 🚀 自動開始するか（false で手動制御） | boolean | true |
| stop-order | 🎭 桁ごとの停止順序（ltr/rtl） | string | ltr |
| height | 📏 数字の高さ（px） | number | 40 |
🔧 メソッド
ref で RollingText インスタンスを取得し、インスタンスメソッドを呼び出せます。詳細はコンポーネントインスタンスのメソッドを参照してください。
| メソッド名 | 説明 | 引数 | 戻り値 |
|---|---|---|---|
| start | 🎬 ローリングアニメーションを開始 | - | - |
| reset | 🔄 初期状態にリセット | - | - |
📝 型定義
コンポーネントは以下の型定義をエクスポートし、TypeScript 開発を容易にします：
ts
importtype { RollingTextProps, RollingTextInstance, RollingTextDirection, RollingTextStopOrder, } from'vant';RollingTextInstance はコンポーネントインスタンスの型です。使用例：
ts
import { ref } from'vue'; importtype { RollingTextInstance } from'vant'; const rollingTextRef = ref<RollingTextInstance>(); rollingTextRef.value?.start();🎨 テーマカスタマイズ
🎭 スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名称 | デフォルト値 | 説明 |
|---|---|---|
| --van-rolling-text-background | transparent | 🎨 背景色（数字コンテナの背景） |
| --van-rolling-text-color | var(--van-text-color) | 🖍️ テキスト色（数字の表示色） |
| --van-rolling-text-font-size | var(--van-font-size-md) | 📏 フォントサイズ（数字表示のサイズ） |
| --van-rolling-text-gap | 0px | 📐 間隔（数字間の距離） |
| --van-rolling-text-item-width | 15px | 📏 各数字の幅（各桁コンテナの幅） |
| --van-rolling-text-item-border-radius | 0px | 🔘 角丸（数字コンテナの角丸） |
📚 関連ドキュメント
🎬 アニメーションコンポーネント
- Transition アニメーション - ページ切り替えアニメーション
- Swipe スワイプ - 画像スライドやコンテンツ切り替え
🔢 数値コンポーネント
- Stepper ステッパー - 数値入力と調整
- Rate レート - 星評価表示
🎨 スタイルツール
- ConfigProvider グローバル設定 - テーマカスタマイズとグローバル設定
- Style 組み込みスタイル - 汎用スタイルクラスと変数