<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)鍵標簽ref='con1和內(nèi)部的span，con1上面有一個anim樣式，根據(jù)animate變量的變化來動態(tài)變化。
注意，我這里給了一個margin-left:2500px的初始位置

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

定義需要的屬性變量

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

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

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

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

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

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

已修改為css3動畫，簡潔很多

<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í)慣不行啊，我頁不知道啊啊啊啊啊'
? ? }
? },
? computed: {
? },
? created() {
? },
? methods: {
? }
}
</script>

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

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

您可能感興趣的文章: