Анимация корзины Ele.me

внешний интерфейс Vue.js CSS

предисловие

До использования Ele.me самым впечатляющим было меню связи и анимация мяча, летящего в корзину, поэтому я хотел посмотреть, как это делают другие, но после просмотра множества демонстраций, имитирующих Ele.me, они реализовал полный большой проект, очень сложно найти этот маленький модуль, поэтому я извлек меню связи и анимацию и написал демонстрацию, чтобы облегчить обучение.

Цель состоит в том, чтобы просто выделить функцию, поэтому детали интерфейса очень расслаблены, давайте взглянем на расслабление ~

визуализация

реализовать функцию

1. Меню ссылок

1.1 Пользователи нажимают на левую панель навигации, чтобы перейти к соответствующему содержимому.

Это очень просто: добавьте событие клика к каждому элементу навигационной панели, на самом деле этого можно добиться и через точку привязки тега a.

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

// 点击右侧导航栏
toHash(item, index) {
    this.selector = index;
    window.location.hash = item; 
    
    // 导航栏向上滚动相应距离，一个li的高度为54px
    this.$refs.left.scrollTop = (index > 7 ? index-7 : 0)*54;
}

1.2 Когда пользователь перемещает контент справа, панель навигации слева будет меняться соответствующим образом.

Содержимое справа слушает событие прокрутки.Когда событие скольжения запускается, заголовок закрепленной позиции вверху получается, а панель навигации позиционируется на соответствующий li в соответствии с заголовком.

var obj = element.getBoundingClientRect();

Приведенный выше API возвращает объект obj, который имеет такие свойства, как left и top, по которым можно получить положение элемента element на странице.

listScroll() {
    // 为了达到联动效果，右侧滑动则改变左侧导航栏样式
    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);
        }
    }
}

1.3 Закрепляемое позиционирование строки заголовка

#el {
    position: sticky;
    top: 0;
}

Позиционирование элемента ведет себя как относительное позиционирование до тех пор, пока не будет пересечен определенный порог, а затем фиксированное позиционирование. Это также позволяет добиться того, что строка заголовка области содержимого всегда находится вверху. Подробнее о липком позиционировании можетСмотри сюда

2. Кнопка всплывает медленно

Когда мы нажимаем кнопку «Добавить», другой контент будет медленно появляться, что достигается с помощью анимации css.

Сначала мы устанавливаем кнопку уменьшения числа и слева от номера выбранного элемента num на 48px, чтобы сделать его скрытым. При нажатии кнопки добавления количество выбранных элементов больше 0, а левое значение изменяется на 0 для достижения эффекта медленной всплывающей анимации.

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

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

3. Анимация мяча, летящего в корзину.

Сначала приготовьте n маленьких шариков, почему не один? Потому что, если пользователь постоянно нажимает, чтобы добавить, может быть недостаточно мячей, поэтому необходимо несколько мячей.

<!-- 运动的小球 -->
<div id="points">
    <div class="pointOuter pointPre">
        <div class="point-inner"></div>
    </div>  
    <!--其他n个小球-->
</div>

Сделайте мяч абсолютно позиционированным, чтобы изменить его слева и сверху.

Идея реализации анимации: когда пользователь щелкает, чтобы добавить, положение маленького шарика устанавливается в положение элемента, по которому щелкнули, и получается положение назначения (положение корзины). к кривой Безье.

increase(index1, index2, event) { 
    
    // some code...
    
    // 小球动画 
    var top = event.clientY, // 小球降落起点
        left = event.clientX,
        endTop = window.innerHeight - 30,  // 小球降落终点
        endLeft = 20; 

    // // 小球到达起点并去掉小球的display: none;
    var outer = $('#points .pointPre').first().removeClass("pointPre").css({
        left: left + 'px',
        top: top + 'px'
    });
    var inner = outer.find(".point-inner"); 

    setTimeout(function() { 
        // 将jquery对象转换为DOM对象
        outer[0].style.webkitTransform = 'translate3d(0,' + (endTop - top) + 'px,0)';
        inner[0].style.webkitTransform = 'translate3d(' + (endLeft - left) + 'px,0,0)';
        
        // 小球运动完毕恢复到原点
        setTimeout(function() {
            outer.removeAttr("style").addClass("pointPre");
            inner.removeAttr("style");
        }, 1000);  //这里的延迟值和小球的运动时间相关
    }, 1); 
}

будь осторожен:

  • Причина, по которой время во вложенном setTimeout установлено равным 1 с, заключается в том, что время движения мяча, указанное в CSS, равно 1 с, поэтому после того, как мяч переместился на 1 с, он будет восстановлен в исходное положение. мяч имеет всего Есть только несколько.Если его не восстановить, в следующий раз, когда пользователь нажмет на мяч, этого будет недостаточно...

Суммировать

Выше приведены основные технические моменты главной страницы модуля корзины Ele.me.В этой демонстрации основное внимание уделяется функциям, поэтому пользовательский интерфейс не копируется полностью.Ele.me, вы также можете разветвить проект и добавить компоненты для его расширения. в качественную имитацию, а модуль корзины.

Адрес источника:vue-eleme-shoppingCart

Категории