preface

Before the most impressive is the linkage with hungry? Menu and the ball into the shopping cart animation, so want to see what other people, but to see a lot of imitation hungry? The demo is big implements a complete project, to find the little module is very trouble, so will his menu and animation linkage extracted wrote a demo, easy to learn.

The purpose is just to highlight the function, so the interface details are very relax, everyone also relax to see ~

rendering

Realize the function

1. Linkage menu

1.1 The user clicks the left navigation bar to jump to the corresponding content

This is as simple as adding a click event to each element of the navigation bar, or it can be done with the anchor point of the A tag

<li v-for="(item, index) in navs" 
    :key="index" 
    :class="{click: selector==index}"
    @click="toHash(item, index)">
    {{item}}
</li>
Copy the code

// Click on the right navigation bar toHash(item, index) {this.selector = index; window.location.hash = item; $refs.left. ScrollTop = (index > 7?) $refs.left. index-7 : 0)*54; }Copy the code

1.2 The navigation bar on the left changes in response to the user sliding the content on the right

The content on the right listens for a Scroll event. When the slide event is triggered, the title positioned at the top is obtained and the navigation bar is positioned to the corresponding Li according to the title

var obj = element.getBoundingClientRect();
Copy the code

The API returns an object, obj, that has attributes like left, top, and so on, and can be used to get the location of the element on the page

listScroll() {
    // To achieve linkage effect, the right swipe changes the style of the left navigation bar
    var titles = document.getElementsByClassName('goodTitle');
    for(var i = 0; i < titles.length; i++) {
        var style = titles[i].getBoundingClientRect();
        if(style.top == 107) {
            this.toHash(titles[i].innerHTML, i); }}}Copy the code

1.3 Stickiness positioning of title bar

#el {
    position: sticky;
    top: 0;
}
Copy the code

The element location is represented as a relative location until a certain threshold is crossed, and then as a fixed location. This also enables the content area title bar to always be at the top. You can see more about sticky positioning here

2. The button is ejected slowly

When we click on the add button, the rest of the content will slowly pop up. This is done with the CSS animation.

Let’s set the left of the Reduce button and the selected item number num to 48px and make it hidden. Click the add button to select items more than 0, and then let the left change to 0 to achieve a slow popup animation effect.

 <div :class="{pop: true, mov: item.num>0}">
    <! ---->
 </div>
Copy the code

.pop {
    display: inline-block;
    position: relative;
    left: 48px;
    opacity: 0;
    transition: all ease .5s;
}
.mov {
    left: 0;
    opacity: 1;
}
Copy the code

3. Animation of ball flying into shopping cart

Let’s get n balls. Why not just one? Because there may not be enough balls if the user keeps clicking add, multiple balls are needed.

<! -- Ball in motion -->
<div id="points">
    <div class="pointOuter pointPre">
        <div class="point-inner"></div>
    </div>  
    <! -- n other balls -->
</div>
Copy the code

Make the ball absolutely positioned so you can change its left and top.

Animation implementation idea: when the user clicks to add, the position of a ball is set as the location of the clicked element, and the destination position (shopping cart position) is obtained. When the ball is thrown, the movement mode is made according to the transition of the Bezier curve.

increase(index1, index2, event) { 
    
    // some code...
    
    // Ball animation
    var top = event.clientY, // The starting point of the ball landing
        left = event.clientX,
        endTop = window.innerHeight - 30.// The ball lands at the end
        endLeft = 20; 

    // // Ball reaches the starting point and removes the ball display: none;
    var outer = $('#points .pointPre').first().removeClass("pointPre").css({
        left: left + 'px'.top: top + 'px'
    });
    var inner = outer.find(".point-inner"); 

    setTimeout(function() { 
        // Convert jquery object to DOM object
        outer[0].style.webkitTransform = 'translate3d(0,' + (endTop - top) + 'px,0)';
        inner[0].style.webkitTransform = 'translate3d(' + (endLeft - left) + 'px, 0, 0)';
        
        // The ball returns to the origin after the movement
        setTimeout(function() {
            outer.removeAttr("style").addClass("pointPre");
            inner.removeAttr("style");
        }, 1000);  // The delay value is related to the movement time of the ball
    }, 1); 
}
Copy the code

Note:

• The nested setTimeout is set to 1s because the CSS requires the ball to move for 1s, so it will return to its original position after the ball has moved for 1s. There are only a few balls in total, and if you do not restore them, the next time the user clicks the ball, it will not be enough.

conclusion

The above are the main technical points of the homepage of ele. me shopping cart module. This demo focuses on functions, so the UI is not a complete copy of Ele. me.

Source address: Vue-eleme-shoppingcart