一个滚动动画的表格

技术
字数统计: 1.6k   |   阅读时长≈ 8 分钟

一、随时间间隔跳动滚动的表格

在大屏中经常会用到滚动的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<template>
  <div class="panel monitor">
    <div class="inner">
      <div class="content" style="display: block;">
        <div class="head">
          <span class="col">资源</span>
          <span class="col">告警内容</span>
          <span class="col">告警次数</span>
          <span class="col">告警时间</span>
        </div>
        <div class="marquee-view">
          <div
            class="marquee"
            :style="{ animationDuration: animationDuration + 's' }"
            :class="{ 'no-scroll': dataList.length < 5 }"
          >
            <div class="row" v-for="(item, index) in dataList" :key="index">
              <span class="col">{{ item[7] }}</span>
              <span class="col">{{ item[8] }}</span>
              <span class="col">{{ item[10] }}</span>
              <span class="col">{{ item[6] }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 表格数据
const dataList = ref([])
const currentClickId = ref('')
const animationDuration = ref(0)
onMounted(() => {
  setAnimationDuration()
})
function setAnimationDuration() {
  const baseDuration = 10 // 基础动画时长（秒）
  const durationPerItem = 1 // 每个数据项增加的动画时长（秒）
  animationDuration.value =
    baseDuration + dataList.value.length * durationPerItem
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.monitor {
  height: 520px;
  overflow: hidden;
}

.monitor .inner {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.monitor .content {
  flex: 1;
  padding-top: 20px;
  position: relative;
  display: none;
}

.monitor .head {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  color: #68d8fe;
  font-size: 26px;
  text-align: center;
}

.monitor .head .col:first-child,
.marquee .row .col:first-child {
  flex: 2;
}

.monitor .head .col:nth-child(2),
.marquee .row .col:nth-child(2) {
  flex: 3;
}

.monitor .head .col:nth-child(3),
.marquee .row .col:nth-child(3) {
  flex: 3;
}

.monitor .head .col:nth-child(4),
.marquee .row .col:nth-child(4) {
  flex: 3;
}

.monitor .marquee-view {
  position: absolute;
  top: 75px;
  bottom: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.monitor .row {
  display: flex;

  justify-content: space-between;
  font-size: 22px;
  color: #61a8ff;
  padding: 20px 20px;
  text-align: center;
}

.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}

.monitor .col:first-child {
  flex: 2;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  /* 使用省略符号表示文本溢出 */
}

.monitor .col:nth-child(2) {
  flex: 3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.monitor .col:nth-child(3) {
  flex: 1;
}

.monitor .col:nth-child(4) {
  flex: 3;
}

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move linear infinite;
}

.marquee-view .marquee.no-scroll {
  animation: none;
}

@keyframes move {
  0% {
  }

  100% {
    transform: translateY(-50%);
  }
}

/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
</style>

这里不滚动的判断条件写死了。其实可以更近一步，通过表格内容的总高度和单条数据的高度，动态获取表格每页的条数。

二、连续滚动的表格

在有些场景，比如工作台中的待办事项、通知消息中，我们可能需要连续滚动动画的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<template>
  <div>
    <div style="padding-left:20px;font-size: 18px;font-weight: 700;">
      <i class="el-icon-s-cooperation"></i><span>待办事项</span>
    </div>
    <el-divider></el-divider>
    <div class="panel monitor">
      <div class="inner">
        <div class="content" style="display: block;">
          <div class="marquee-view">
            <div
              class="marquee"
              :class="{ marquee_top: animate }"
              @mouseover="closeAnimation"
              @mouseleave="startAnimation"
            >
              <div v-for="(item, index) in dataList" :key="index" class="row">
                <span class="col">{{ item.catalog }}</span>
                <span class="col text-box ">{{ item.title }}</span>
                <span class="tooltip">{{ item.title }}</span>
                <span class="col">{{ item.starttime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      animate: false,
      timer: null,
      dataList: [],
    }
  },
  async created() {
    await this.getTodoList()
    this.timer = setInterval(this.showMarquee, 2000)
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    formatDate(val) {
      const d = new Date(val)
      const year = d.getFullYear()
      const month = d.getMonth() + 1
      const day = d.getDate()
      // const hour = d.getHours();
      // const min = d.getMinutes();
      // const sec = d.getSeconds();
      return (
        year +
        '-' +
        (month < 10 ? '0' + month : month) +
        '-' +
        (day < 10 ? '0' + day : day)
      )
    },
    showMarquee() {
      if (this.dataList.length > 7) {
        this.animate = true
        setTimeout(() => {
          this.dataList.push(this.dataList[0])
          this.dataList.shift()
          this.animate = false
        }, 500)
      }
    },
    closeAnimation() {
      clearInterval(this.timer)
    },
    startAnimation() {
      this.timer = setInterval(this.showMarquee, 2000)
    },
    getTodoList() {
      this.$api
        .getTodoList()
        .then((res) => {
          if (res && res.Status == 'OK') {
            this.dataList = res.Return?.tbodyList
            this.dataList.forEach((item) => {
              item.starttime = this.formatDate(item.starttime)
            })
          }
        })
        .catch((res) => {
          this.isLoading = false
        })
    },
  },
  computed: {},
  watch: {},
}
</script>
<style scoped lang="less">
.monitor {
  height: 230px;
  overflow: hidden;
}

.monitor .inner {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}

.monitor .content {
  flex: 1;
  padding-top: 20px;
  position: relative;
  display: none;
}

.marquee .row .col:first-child {
  flex: 2;
}

.marquee .row .col:nth-child(2) {
  flex: 3;
}

.marquee .row .col:nth-child(3) {
  flex: 3;
}

.marquee .row .col:nth-child(4) {
  flex: 3;
}

.monitor .marquee-view {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.monitor .row {
  display: flex;
  position: relative;
  justify-content: space-between;
  font-size: 16px;
  padding: 5px 20px;
  text-align: center;
}

.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.monitor .col:first-child {
  flex: 2;
  white-space: nowrap;
  /* 确保文本在一行内显示 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  /* 使用省略符号表示文本溢出 */
}

.text-box {
  flex: 3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.text-box:hover + .tooltip {
  display: block;
}
.tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 120px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #303133;
  color: #fff;
  padding: 10px;
  white-space: normal;
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.monitor .col:nth-child(3) {
  flex: 1;
}

.monitor .col:nth-child(4) {
  flex: 3;
}

/* 通过CSS3动画滚动marquee */
.marquee_top {
  transition: all 0.5s ease-out;
  margin-top: -32.398px;
}

/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
</style>

在第一种动画的基础上稍加改造就得到了第二种动画。可以看到，随时间间隔跳动的动画是通过@keyframes 定义关键帧实现的。而连续滚动的动画是通过 transition 过渡实现的。

  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2023-2025 congtianfeng
  • 访问人数: | 浏览次数: