I have feature should show stocks indeics auto infinite scroll. first i want to use javascript to controll it. but other developer told me we can use CSS animation create this，it's cool let's me show you code below.
<template>
<div class="marquee">
<div class="marquee" :style="{ width: `${width}px`, height: `${height}px` }">
<div class="marquee--inner">
<div class="group">
<slot />
</div>
<div class="group">
<slot />
</div>
</div>
</div>
</div>
</template>
<script>
import PropTypes from 'vprop-type'
export default {
name: 'Marquess',
props: {
width: PropTypes.integer,
height: PropTypes.integer.def(20),
itemKlass: PropTypes.string.def('item'),
speed: PropTypes.integer.def(8) // 5s
}
}
</script>
<style scoped lang="scss">
@import '_variable.scss';
.lb-marquee {
overflow: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
.marquee {
width: 100%;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.marquee--inner {
display: block;
width: 200%;
margin: $gutter-sm 0;
position: absolute;
// keywords
animation: marquee 40s linear infinite;
}
.marquee--inner:hover {
animation-play-state: paused;
}
.group {
float: left;
width: 50%;
.item {
width: 100px;
display: inline-block;
float: left;
}
}
@keyframes marquee {
0% {
left: 0;
}
// here is keywords
100% {
left: -100%;
}
}
}
</style>
That all you can use the Vue component like this:
<Marquess :width="210 * 8" :height="140">
<div v-for="(item, index) in items" :key="item.id" :index="index" class="item" :style="{ width: '210px' }">
......
</div>
</Marquess>
I have videos to show what the component is demo
Hope it can help you :)
Top comments (0)