2

Я работаю над анимацией меню гамбургера, где меню при щелчке превращается в две формы: треугольник и шеврон справа от него.

У меня есть некоторые проблемы со сглаживанием анимации. Использую border-color, чтобы выполнить то, что хочу, но при двойном щелчке (= «обратная» анимация) реализуется не так гладко, как стартовая анимация.

HTML и CSS:

body {
  background-color: #252626;
}
div {
  width: 200px;
  margin: 100px;
  div {
    height: 50px;
    margin: 30px 0;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    transition: all .3s ease-in-out;
  }
}
.one, .three {
  background-color: #DFBA68;
  height: 12px;
}

.one-clicked, .three-clicked {
  position: relative;
  left: 50px;
  border-radius: 12px;
}

.one-clicked {
  transform: rotate(33deg) scale(.93, 1);
  top: 90px;
}

.two {
  width: 0;
  height: 0;
    border-top: 25px solid #F7F4EA;
    border-left: 200px solid #F7F4EA;
    border-bottom: 25px solid #F7F4EA;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out .2s;
}

.two-clicked{
  width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 150px solid #F7F4EA;
    border-bottom: 100px solid transparent;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out;
}

.three-clicked{
  transform: rotate(-33deg) scale(.93, 1);
  top: -87px;
}
<div class="button">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

Может ли кто-нибудь помочь мне, сгладить эту полную анимацию для меня?

Свободный перевод вопроса Hamburger menu animation от участника @Pieter VDE.

1

1 ответ 1

7

Я немного позанимался анимацией иконки меню гамбургера. Полностью переработал код с помощью svg, и использовал библиотеку snapsvg.io для анимации.

Ниже gif результата:

введите сюда описание изображения

codepen demo для animated burger icon

Обратите внимание, что функция - bounce easing function может быть изменена для облегчения или изменения параметров анимации.

Здесь полный код:

var s           = Snap().attr({viewBox:'0 0 100 100'}),
    mid         = s.path("M0 40L100 40L100 60L0 60").attr({fill:"#F7F4EA"}),
    ext         = s.path('M0 20L100 20M100 80L0 80').attr({strokeWidth: 4,stroke:"#DFBA68"}),
    clicked     = 0;

s.click(function(){
  if (clicked == 0){
    mid.animate({d:"M0 5L55 50L55 50L0 95"},700,mina.bounce);
    ext.animate({d:"M40 5L90 51.15M90 48.85L40 95"},700,mina.bounce);
    clicked=1;
  }  
  else {
    mid.animate({d:"M0 40L100 40L100 60L0 60"},700,mina.bounce);
    ext.animate({d:"M0 20L100 20M100 80L0 80"},700,mina.bounce);
    clicked=0;
  }
});
html{height:100%;}
body{min-height:100%; background-color:#252626;text-align:center;}
svg{width:20%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

Свободный перевод ответа от участника @web-tiki.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.