Shulou(Shulou.com)06/01 Report--

This article mainly introduces the vue how to achieve fast forward and backward racing lantern components related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this vue how to achieve fast forward and backward racing lantern components will have something to gain, let's take a look at it.

Write a racing lantern assembly with vue that can fast forward and backward.

Due to business requirements, in order to achieve a racing lantern that can control the speed, we began to use js's setinterval to subtract a character to the back every few milliseconds, but the effect was not ideal and gave up. After the query with js's animate this api transformation is complete!

Effect picture

Component code

{{item +','}} {{text}} export default {name: "marquee", props: {text: {type: String, required: true}, speed: {type: Number, required: false, default: 110}, / / whether each can click on the trigger event itemClick: {type: Boolean Required: false, default: false}, / / Segmentation symbol for each trigger event element splitSymbol: {type: String, required: false, default:''}}, data () {return {aniInstance: null, speedTimer: null} }, methods: {setAnimate () {const contentWidth = this.$refs.marqueeText.scrollWidth; const keyframes = [{transform: "translateX"}, {transform: `translateX (- ${contentWidth} px) `}]; const animateOptions = {duration: (contentWidth / this.speed) * 1000, iterations: Infinity, easing: "linear"} This.aniInstance = document.querySelector (".marquee-text") .animate (keyframes, animateOptions);}, / * Fast forward * @ param {Boolean} isLeft is the left direction * / speedUp (isLeft = false) {const set = () = > {if (this.aniInstance.currentTime > 0) {this.aniInstance.currentTime = this.aniInstance.currentTime + (isLeft? 2000:-2000) This.aniInstance.currentTime {set ()}, 100)}, / / Fast forward stop speedStop () {clearInterval (this.speedTimer); this.speedTimer = null }, / * pause, * @ param {Boolean} isPause whether to pause * / pause (isPause = false) {this.aniInstance [["play", "pause"] [Number (isPause)]] ();}}, mounted () {this.$nextTick (() = > {this.setAnimate ();});}}; .marquee {position: relative; padding: 10px 0 Overflow: hidden; width: 100%; font-size: 16px; color: # fff; background-image: linear-gradient (to left, # b9565e, # cb655a, # da7655, # e58a50, # eb9f4b); &: hover. Marquee-btn {opacity: 1;}. Marquee-btn {position: absolute; top: 50%; transform: translateY (- 50%); padding: 15px; color: # fff Background: rgba (1,1,1,0.4); z-index: 999; cursor: pointer; opacity: 0; transition: all 0.2s linear;}. Btn-left {left: 0;}. Btn-right {right: 0;}. Marquee-text {white-space: nowrap; span {&: hover {cursor: pointer; color: # 2c3e50;}

Parent component code

This is the end of the article on "how to realize the fast-forward and backward racing lantern assembly in vue". Thank you for reading! I believe you all have a certain understanding of "how to realize the fast-forward and backward racing lantern assembly in vue". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.