The Ordinary way of JS — Learning the effect in people’s angry Eyes (1)

Recently, I have seen the interface of people’s angry eyes, and I feel that there are many places to learn. Let’s take a look at the popularity of the jump here. This code is based on VUe2.x.x.

A summary,

First take a look at the renderings:

To achieve the above effect, we have the following parts:

• Determine whether the element is in the visible area;
• The use of function throttling;
• Element height transition animation;
• Digital dance animation;

Two, judge whether the element is in the visible area

First, we need to get the location information of the element. Here, we use the method getBoundingClientRect, which is described in MDN. And then we just compare it to the visible area, and we’re OK.

    // methods
    isElementInViewport (el, offset) {
        const h = offset || 20,
              box = el.getBoundingClientRect(),
              top = (box.top >= 0),
              left = (box.left >= 0),
              bottom = (box.bottom <= (window.innerHeight || document.documentElement.clientHeight) + h),
              right = (box.right <= (window.innerWidth || document.documentElement.clientWidth) + h);
        return (top && left && bottom && right);
    }
Copy the code

Use of function throttling

Next we need to listen for the ‘scroll’ event to see if the element is visible. For one of the optimizations for Scroll events, we need to use function throttling. You can choose to import the Throttle functions for your underscore. Js, but here I tried the requestAnimationFrame to throttle the functions:

    / / mounted:
    document.addEventListener('scroll'.this.onScroll , false);
    
    / / the methods:
    onScroll (e) {
        if (!this.LOCK) {
            this.LOCK = true;
            window.requestAnimationFrame(this.scrollAction);
        }
    },
    scrollAction () {
        const flag = this.isElementInViewport(this.$refs.zfbitem, 100);
        if(! flag) {this.LOCK = false;
        } else {
            // Trigger element height transition animation
            this.active = true;
            // Remove event listening
            document.removeEventListener('scroll'.this.onScroll , false); }}Copy the code

Four, the element of the high transition animation

There are many ways you can implement an animation in CSS, and I won’t list all of them here, but in this example I used a highly transitional approach. One would say that there’s no difficulty in getting through the height transition, right? In fact, there are quite a few things you need to pay attention to:

• To set the height of an element to 0, don’t simply say height:0; If you can’t do the border, the vertical padding, etc.;
• When you set the height of your element to 100px and you set max-height to 0, it will only show the height of 0;
• When height is auto, we cannot transition. So for the auto case, we can use max-height to simulate, in general, the effect is ok.

The implementation code is still very simple, so I won’t post the code here.

Five, digital jump animation

First we need to execute the digital dance animation after the high transition animation is completed. Here we need to listen for the ‘transitionEnd’ event.

• The transitionEnd is triggered more than once for each transitionattribute;
• The transitionend event supports bubbling, so be sure to prevent bubbling if the child element also has a transition effect.

    // watch : 
    active (newValue) {
        if (newValue) {
            this.$refs.zfbitem.addEventListener('transitionend'.this.transitionAction, false); }}// methods:
    transitionAction (e) {
        // Remove the listener when it is no longer needed
        this.$refs.zfbitem.removeEventListener('transitionend'.this.transitionAction, false);
        this.numberBounce();
    }
Copy the code

For the digital jumping animation, I just took advantage of the responsive characteristics of Vue to lazy a wave, feeling that the implementation is still a little stiff, I mainly started from the following aspects:

• The default is two digits;
• The ones place and tens place need to jump a round of 0 to 9, and then jump to the final number, so as to avoid special cases;
• The ones place and ten place animations take the same amount of time to execute. Calculate the time required for each frame by the length and the number of words that each has to jump.

    // The parameters that the component needs to pass in
    props: {
        rate: Number
    }
    
    // Divide the ones place and the tens place
    computed: {
        numberArray () {
            return (this.rate + ' ').split(' ');
        }
    }
    
    numberBounce () {
        let arr = this.numberArray,
            totalTime = 200,
            a = arr[1],
            aLen = Number.parseInt(a),
            aTime = Math.floor(totalTime / (aLen + 9)),
            i = 0,
            b = arr[0],
            bLen = Number.parseInt(b),
            bTime = Math.floor(totalTime / (bLen + 9)),
            j = 0;
        this.bit = 0;
        this.ten = 0;
        this.bitTimeId = setInterval(_= > {
            i++;
            this.bit = i % 10; / / count
            if (i - 10 === aLen) {
                // Don't forget to clear the timer
                clearInterval(this.bitTimeId);
                this.bitTimeId = null;
            }
        }, aTime);

        this.tenTimeId = setInterval(_= > {
            j++;
            this.ten = j % 10;
            if (j - 10 === bLen) {
                clearInterval(this.tenTimeId);
                this.tenTimeId = null;
            }
        }, bTime);
    }
Copy the code

Six, summarized

Although this is a simple effect, but the knowledge point that contains is very much, should emphasize again here: the foundation is very important, must not impetuous. (^_^)

For those of you who like this article, please follow my subscription account for more content.