Проект электронной коммерции Vue — реализация спецэффекта полета товара в корзину

Vue.js
Проект электронной коммерции Vue — реализация спецэффекта полета товара в корзину

1. Напишите это впереди 🚀

Дорогие друзья, давно не виделись. Недавно я использовал свое свободное время, чтобы открыть исходный код проекта электронной коммерции Vue, который представляет собой высокую имитацию известной платформы для покупок продуктов O2O. Весь проект по-прежнему весьма полезен. Вы можете отсканируйте QR-код ниже, чтобы испытать его.Эта статья представляет собой проектГлава о демонтаже основных знаний, в основном, представляет собой процесс реализации демонтажа и добавления продуктов в корзину.

нажмите на меня, чтобы испытать

🎉🎉 Адрес проекта с открытым исходным кодом Спасибо за звезду + подборку

Во-первых, позвольте мне кратко представить стек технологий, используемых в этом проекте:

Весь проект принимаетvue-cli3строительные леса,Ведро семейства Vue (vue, vuex, vue-router),Платформа пользовательского интерфейса ВантИ множество известных и полезных сторонних библиотек, таких как:axios,fastclick,better-scroll,twix.js,pubsub.js,moment.js,vue-amapи Т. Д. Выбор единицы измерения пикселяrem, интерфейс фоновых данных проходит черезEasy-MockПостроение, наиболее близкое к корпоративной разработке, модуляризация, высокая связность и низкая связанность в наибольшей степени, значительно улучшающие ремонтопригодность и масштабируемость каждого модуля, я считаю, что после прочтения исходного кода и серии статей по разборке, которые я написал, Какой ранг осадного льва вы будете вдохновлены!Открыть исходный код нелегко, ваши лайки - самая большая поддержка для меня 🎉🎉Спасибо~Спасибо♪(･ω･)ﾉ

2. Процесс добавления летящих товаров в корзину

Прежде всего, давайте посмотрим, как это будет выглядеть, не правда ли, круто?✈️✈️ Не стесняйтесь ставить лайки и поддерживать автора💓

Реализовать идеи

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

С помощью приведенного выше народного анализа все этапы реализации можно кратко разделить на три этапа для завершения кодирования:

  • Первый этап: нажмите на корзину, появится небольшой шарик с миниатюрами товаров.
  • Второй этап: шарик миниатюры товара летит из текущей позиции в нижнюю позицию корзины в виде кривой
  • Третий этап: когда шарик миниатюры продукта полностью исчезает в позиции корзины, значок количества корзины увеличивается на 1, и реализуется анимация пружины.

реализация кода первого этапа

Первый этап кодирования: нарисуйте круглый шар в средней части изделия. Это очень просто, просто добавьте один в область изображения продукта.div,настраиватьposition:fixedи ширина и высота и т.д., а что?

Давайте сначала закопаем вопрос, как сделать так, чтобы шарик появлялся в диапазоне нажатия на текущий товар?

Этап 1 наступая на яму

Сначала я прошелся по списку продуктов, вычислив атрибут, добавив шарики миниатюр продукта ко всем представлениям продукта, а затем добавив логический атрибут к каждому списку продуктов.show, щелкнув значок корзины, чтобы управлять отображением и скрытием только что созданного шарика, а затем я зашел в тупик, долго жалел, и данные вычисляемого атрибута прошлиsetПосле смены метода Дом стал непослушным, то есть не играл в карты по рутине (потому что в вычисляемом атрибуте есть кеш данных), поэтому от этого корявого метода пришлось отказаться.

Окончательный план реализации этапа 1

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

data () {
    return {
      showMoveDot: [], //控制下落的小圆点显示隐藏
    }

Затем мы даем, когда мы нажимаем на корзинуshowMoveDotМассив динамически добавляет свойства, затем проходит через массив в Dom, привязывается в обоих направлениях и, наконец, проходитv-ifУправлять отображением и прятаться, разве это не прекрасно~~

Нажмите на корзину, чтобы датьshowMoveDotУвеличиватьtrueсвойства

methods: {
addToCart (product, num) {
    this.showMoveDot = [...this.showMoveDot, true];
 }
}

Путешествие по ДомуshowMoveDot, и черезv-ifдля управления отображением эскизов продуктов

<div
    v-for="(item,index) in showMoveDot"
    :key="index">
    <div class="move_dot"
         ref="ball"
         v-if="item">
    </div>
</div>

На этом этапе при нажатии на значок корзины покупок в текущем продукте отображается небольшой шарик с миниатюрами. На этом этап завершен ✿✿ヽ(°▽°)ノ✿ ~

Реализация кода второго этапа

На этом этапе требуются знания в области анимации, поэтому первое, что приходит на ум, — это Vue.transitionатрибут, сначала оберните слой шарика миниатюрыtransitionи увеличитьappearанимировать и реализоватьbeforeEnter,afterEnterМетод события, поэтому измените код Dom в это время.

<transition appear
               @before-appear="beforeEnter"
              @after-appear='afterEnter'
              v-for="(item,index) in showMoveDot"
              :key="index.id">
    <div class="move_dot"
         ref="ball"
         v-if="item">
    </div>
  </transition>

Два метода приведенного выше кода DombeforeEnterиafterEnterМетоды используются до первого рендеринга анимации и после рендеринга анимации, тогда мы должны сосредоточить внимание на этих двух состояниях. В первом рендеринге мы определяем положение шара, далее будем использовать метод в это времяgetBoundingClientRect, этот метод возвращает набор прямоугольников, вот и все, вы можете использовать этот метод для определения положения элемента на экране 😊~

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

определить дваdataчтобы принять значение, полученное при нажатии на значок добавления в корзину.

data () {
    return {
      showMoveDot: [], //控制下落的小圆点显示隐藏
      elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
      elTop: 0, //当前点击购物车按钮在网页中的绝对left值
    }

Затем мы получаем местоположение методом нажатия «Добавить в корзину».

 methods: {
    addToCart () {
      this.showMoveDot = [...this.showMoveDot, true];
      this.elLeft = event.target.getBoundingClientRect().left;
      this.elTop = event.target.getBoundingClientRect().top;
    }
}

В этот момент у меня появилась возможность нажать на иконку, чтобы добавить в корзину✌️На данный момент мы на полпути к успеху~ После получения расстояния для увеличения значка корзины относительное положение используется для определения положения шарика миниатюры продукта, поэтому перед рендерингом анимации мы устанавливаем егоtransformЗначение, значение x, y можно отрегулировать само по себе, и пусть его прозрачность будет 0, временно не отображается.

beforeEnter (el) {
      // 设置transform值
      el.style.transform = `translate3d(${this.elLeft - 30}px,${this.elTop - 100}px , 0)`;
      // 设置透明度
      el.style.opacity = 0;
    },

Далее ключ, как заставить мяч двигаться из текущей позиции внизTabbarв корзине? Таким же образом проходимgetBoundingClientRectметод определения логотипа корзины нижней вкладкиleftиtopvalue, после получения этого значения позвольте шарику двигаться в направлениях x и y тележки для покупок по кривой Безье в текущем положении.showMoveDotсвойство установлено наfalseИ прозрачность 1.

В методе после того, как мяч нарисован:

afterEnter (el) {
      // 获取底部购物车徽标
      const badgePosition = document
        .getElementById("buycar")
        .getBoundingClientRect();
      // 设置小球移动的位移
      el.style.transform = `translate3d(${badgePosition.left + 30}px,${badgePosition.top - 30}px,0)`
      // 增加贝塞尔曲线  
      el.style.transition = 'transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
      el.style.transition = 'transform .88s linear';
      this.showMoveDot = this.showMoveDot.map(item => false);
      // 设置透明度
      el.style.opacity = 1;
  }

На этом все готово! Нажмите кнопку «Добавить корзину», мяч может изогнуться и полететь в корзину, давайте покрасуемся с помощью Gif ✿✿ヽ(°▽°)ノ✿

Копаем друзья, пожалуйста, оставайтесь (╥╯^╰╥) Как вы думаете, это сделано? Для гика🐵 этот эффект просто слишком низок, поэтому давайте продолжим делать оптимизацию вместе~

Этап 3 Оптимизация опыта

Оптимизация 1. Превратите шарик в изображение щелчка по текущему продукту.

В начале я был реально в тупике.Столько картинок,кто знает какую отобразить?Позднее у меня возникла мысль,а не просто ли это динамически подгружаемая картинка,когда я нажимаю добавить в корзину, текущий товарный объект уже получен, вы боитесь Что, только бери сразу и все!

  • 1. Добавить один к даннымdropImageАтрибуты.
data () {
    return {
      showMoveDot: [], //控制下落的小圆点显示隐藏
      elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
      elTop: 0, //当前点击购物车按钮在网页中的绝对left值
      dropImage: '' // 小球图片
    }
  • 2. Получено динамической привязкой в ​​ДомеdropImage 
<transition appear
                  @after-appear='afterEnter'
                  @before-appear="beforeEnter"
                  v-for="(item,index) in showMoveDot"
                  :key="index.id">
        <div class="move_dot"
             ref="ball"
             v-if="item">
          <!-- 小球图片 -->
          <img :src="dropImage"
               alt="">
        </div>
      </transition>
  • 3. Динамическая отдачаdropImageназначать
addToCart (product) {
      // 取出商品的图片
        this.dropImage = product.small_image;
      // 将商品添加到购物车中
      this.ADD_TO_CART(product);
      // 购物车左边的
      this.elLeft = event.target.getBoundingClientRect().left;
      this.elTop = event.target.getBoundingClientRect().top;
      this.showMoveDot = [...this.showMoveDot, true];
    },

Хорошо! На этом мы завершили динамическую загрузку изображения маленького шарика, давайте сделаем Gif-изображение, чтобы похвастаться ✿✿ヽ(°▽°)ノ✿

Но есть проблема, которую я обнаружил, картинка пролетает очень резко, прямо-прямо, недостаточно дружелюбно, так что продолжим оптимизацию~~

Оптимизация 2: миниатюры товаров, которые летят в корзину, постепенно становятся меньше

Ха-ха~ Пусть товары постепенно становятся меньше, когда они прилетают, подумай об этом или используйcss3изkeyframesЛучше сделать это, не нести чушь и перейти сразу к коду.

  • 1. Настройкиkeyframesзначение
 @keyframes mymove {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(0.6);
    }
    75% {
      transform: scale(0.4);
    }
    100% {
      transform: scale(0.2);
    }
  }
  • 2. Добавьте миниатюры продуктовanimationи присоединитьсяkeyframes 
img {
        animation: 0.88s mymove ease-in-out;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
      }

Хорошо, готово! Давайте сделаем Gif, чтобы похвастаться ✿✿ヽ(°▽°)ノ✿

Почему мне до сих пор кажется, что это немного неловко, никак, Дева, его надо сделать более совершенным🙈

Оптимизация 3: Эффект пружины после добавления товаров в корзину

Продукт сжимается, а шарик постепенно становится меньше и падает в корзину.В это время тележка имеет эффект пружины, что более красиво.Это все еще старый метод.css3изkeyframesЭто как нельзя более уместно~

Поскольку Tabbar используетсяVantКомпоненты пользовательского интерфейса, отдельноDashboard.vueфайл, так что вDashboard.vueУстановить иконку для корзины в файлеkeyframesценность.

@keyframes carmove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

и поставь этоkeyframesустановить значение на значок корзины

.moveToCart {
  animation: mymove 0.5s ease-in-out;
}

Добавлена ​​анимация корзины, но как управлять шариком, чтобы он перемещался в корзину, чтобы анимация работала? Итак, во-первых, я нашел способ закончить анимацию шарика, и нашел его. путем проверки информации.transitionendиwebkitAnimationEndЕсть два метода, поэтому я отслеживал их, и когда шарик исчез, я динамически увеличивал корзину внизу Tabbar в этих двух методах.keyframesценность.

afterEnter (el) {
      // 监听小球动画结束方法
      el.addEventListener('transitionend', () => {
        el.style.display = 'none';
        this.listenInCart();
      })
       // 监听小球动画结束方法
      el.addEventListener('webkitAnimationEnd', () => {
        el.style.display = 'none';
        this.listenInCart();
      })
    },

this.listenInCart()Метод заключается в управлении анимацией значка корзины на нижней вкладке Tabbar, мы определили классmoveToCart, я использую хитрый метод, когда анимация заканчивается, добавляю класс в корзину ТаббараmoveToCart, а затем позвольте ему удалить этот класс через 500 мс, что гарантирует, что каждый раз при добавлении корзины будет выполняться нижняя вкладка.keyframsанимация.

listenInCart () {
      // 拿到底部Tabbar购物车的DOM元素添加class
      document.getElementById("buycar").classList.add('moveToCart');
      setTimeout(() => {
        // 500毫秒后移除底部Tabbar购物车的DOM元素class
        document.getElementById("buycar").classList.remove('moveToCart');
      }, 500);
    }

На данный момент это действительно сделано 🌸, давайте покрасуемся Gif ✿✿ヽ(°▽°)ノ✿

Я тут все это видел, не нравится и поддержу😄, поощрите автора~

В-третьих, точка приближается🚀🚀

Я знаю, что друзьям-копателям не терпится увидеть исходный код~ Конечно, эта точка знаний — лишь вершина айсберга всего проекта, есть много новых технологий, которые просты в использовании и забавны, такие какBetter-scrollВ этом проекте есть почти все основные технологии, такие как скользящее использование, интеграция карт Gaode, водопад изображений, адаптация мобильного терминала и т. д. ~ ставьте подключение к GitHub, и друзья, не скупитесь на звездочки в свои руки ✿✿ヽ(° ▽°)ノ✿

🎉Vue создает крупномасштабные одностраничные приложения для электронной коммерции с открытым исходным кодом! Нажмите на меня, чтобы увидеть исходный код 🚀🚀

В-четвертых, подружитесь 👭

Я надеюсь, что мой обмен может помочь вам, распространять знания, делиться счастьем и добиваться прогресса вместе с вами ~

Отсканируйте QR-код ниже, чтобы подписаться на мою личную общедоступную учетную запись WeChat.передний конец пончик, Вы также можете отсканировать мой приват WeChat, чтобы вытащить вас в группу.В группе есть старшие фронтенд-большие шишки, которые время от времени будут делиться интересными и полезными новыми знаниями в области фронтенда, ожидая, пока вы поиграете ~~

Категории