快捷導(dǎo)航

vue實(shí)現(xiàn)文字滾動(dòng)效果

更新時(shí)間：2022年04月08日 08:48:54 作者：一鍵寫代碼

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文字滾動(dòng)效果，公告滾動(dòng)播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)文字滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目需求：系統(tǒng)公告，要從右忘左循環(huán)播放的牛皮廣告效果。

實(shí)現(xiàn)：

方案一：使用定時(shí)器和CSS3的過(guò)渡屬性來(lái)實(shí)現(xiàn)。

<template>
? <div class="notice-card-wrapper">
? ? ? ? <div id="message-wrap" ref="out" class="message">
? ? ? ? ? <div id="con1" ref="con1" :class="{anim:animate==true}" style="margin-left: 2500px;">
? ? ? ? ? ? <span v-html="notice"></span>
? ? ? ? ? </div>
? ? ? ? </div>
? </div>
</template>

關(guān)鍵標(biāo)簽ref='con1和內(nèi)部的span，con1上面有一個(gè)anim樣式，根據(jù)animate變量的變化來(lái)動(dòng)態(tài)變化。
注意，我這里給了一個(gè)margin-left:2500px的初始位置

data() {
? ? return {
? ? ? animate: true,
? ? ? notice: '',
? ? ? intervalId: null // 定時(shí)器標(biāo)識(shí)
? ? }
? },

定義需要的屬性變量

mounted() {
? ? this.scroll() // 動(dòng)畫先執(zhí)行一次
? ? this.intervalId = setInterval(this.scroll, 16000) // 間隔時(shí)間后重復(fù)執(zhí)行
? },
? updated() {
? },
? destroyed() {
? ? clearInterval(this.intervalId) // 清除定時(shí)器
? },
? ? methods: {
? ? // 異步ajax獲取公告內(nèi)容，略過(guò)
? ? handleFetchNotice() {
? ? ? fetchNotice().then(res => {
? ? ? ? this.notice = res.data.notice
? ? ? }).catch(err => {
? ? ? ? console.log(err)
? ? ? })
? ? },
? ? // 定義動(dòng)畫
? ? scroll() {
? ? ? this.animate = true
? ? ? const con1 = this.$refs.con1
? ? ? setTimeout(() => {
? ? ? ? con1.style.marginLeft = '-500PX'
? ? ? }, 500)
? ? ? setTimeout(() => {
? ? ? ? con1.style.marginLeft = '2500px'
? ? ? ? this.animate = false
? ? ? }, 15000)
? ? }
? }

說(shuō)明：執(zhí)行動(dòng)畫函數(shù)，500ms后將refs.con1的margin-left值改為-500px,這個(gè)時(shí)候標(biāo)簽的過(guò)渡屬性是ture，會(huì)動(dòng)畫顯示這個(gè)變化過(guò)程。15000ms后，將margin-left值回到初始狀態(tài)，過(guò)渡屬性修改為false，動(dòng)畫切斷。

最后一步，就算在css中定義過(guò)渡樣式

<style lang="scss">
.anim{
? transition: all 15s linear;
}
</style>

margin-left有2500px改為-500px的過(guò)程，過(guò)渡動(dòng)畫線性執(zhí)行15s。

然后，定時(shí)器16000毫秒后，重復(fù)執(zhí)行。

已修改為css3動(dòng)畫，簡(jiǎn)潔很多

<template>
? <div class="notice-card-wrapper">
? ? <div class="header">
? ? ? <div class="title">
? ? ? ? <!-- 系統(tǒng)公告 -->
? ? ? ? <div class="message">
? ? ? ? ? <div class="inner-container">
? ? ? ? ? ? <span v-html="notice"></span>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? name: 'SystemNotice',
? components: {
? },
? data() {
? ? return {
? ? ? notice: '我是廣播文字內(nèi)容，哈哈哈哈，你習(xí)慣不行啊，我頁(yè)不知道啊啊啊啊啊'
? ? }
? },
? computed: {
? },
? created() {
? },
? methods: {
? }
}
</script>

<style lang="scss" scoped>
.notice-card-wrapper {
? .inner-container {
? ? margin-left: 100%; // 把文字弄出可見(jiàn)區(qū)域
? ? width: 200%;
? ? animation: myMove 30s linear infinite; // 重點(diǎn)，定義動(dòng)畫
? ? animation-fill-mode: forwards;
? }
? ? /*文字無(wú)縫滾動(dòng)*/
? @keyframes myMove {
? ? 0% {
? ? ? transform: translateX(0);
? ? }
? ? 100% {
? ? ? transform: translateX(-2500px);
? ? }
? }
? }
}
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: