diff options
Diffstat (limited to 'packages/client/src/components/MkMarquee.vue')
| -rw-r--r-- | packages/client/src/components/MkMarquee.vue | 106 |
1 files changed, 0 insertions, 106 deletions
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue deleted file mode 100644 index 5ca04b0b48..0000000000 --- a/packages/client/src/components/MkMarquee.vue +++ /dev/null @@ -1,106 +0,0 @@ -<script lang="ts"> -import { h, onMounted, onUnmounted, ref, watch } from 'vue'; - -export default { - name: 'MarqueeText', - props: { - duration: { - type: Number, - default: 15, - }, - repeat: { - type: Number, - default: 2, - }, - paused: { - type: Boolean, - default: false, - }, - reverse: { - type: Boolean, - default: false, - }, - }, - setup(props) { - const contentEl = ref(); - - function calc() { - const eachLength = contentEl.value.offsetWidth / props.repeat; - const factor = 3000; - const duration = props.duration / ((1 / eachLength) * factor); - - contentEl.value.style.animationDuration = `${duration}s`; - } - - watch(() => props.duration, calc); - - onMounted(() => { - calc(); - }); - - onUnmounted(() => { - }); - - return { - contentEl, - }; - }, - render({ - $slots, $style, $props: { - duration, repeat, paused, reverse, - }, - }) { - return h('div', { class: [$style.wrap] }, [ - h('span', { - ref: 'contentEl', - class: [ - paused - ? $style.paused - : undefined, - $style.content, - ], - }, Array(repeat).fill( - h('span', { - class: $style.text, - style: { - animationDirection: reverse - ? 'reverse' - : undefined, - }, - }, $slots.default()), - )), - ]); - }, -}; -</script> - -<style lang="scss" module> -.wrap { - overflow: clip; - animation-play-state: running; - - &:hover { - animation-play-state: paused; - } -} -.content { - display: inline-block; - white-space: nowrap; - animation-play-state: inherit; -} -.text { - display: inline-block; - animation-name: marquee; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-duration: inherit; - animation-play-state: inherit; -} -.paused .text { - animation-play-state: paused; -} -@keyframes marquee { - 0% { transform:translateX(0); } - 100% { transform:translateX(-100%); } -} -</style> |