2

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

0

2 ответа 2

2

А вот Вам вариант без JQuery, без js и даже без анимации - на чистом css с применением transition:

* {
  box-sizing: border-box;
}
#cart-btn {
  display: none;
}
[for="cart-btn"] {
  background-color: #e5eeed;
  color: #709493;
  padding: 7px;
  display: block;
  position: relative;
  width: 65px;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  transition: .2s;
}
[for="cart-btn"]:hover {
  background-color: #a7c205;
  color: white;
}
.add-to-cart {
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  background-color: #a7c205;
  color: white;
  overflow: hidden;
  border-radius: 30px;
  transition: .5s;
}
#cart-btn:checked ~ [for="cart-btn"] .add-to-cart {
  width: 100%;
  height: 100%;
  padding-top: 7px;
}
<script src="https://use.fontawesome.com/e12de67aa2.js"></script>

<input type="checkbox" id="cart-btn">
<label for="cart-btn">
  <div class="add-to-cart"><i class="fa fa-check" aria-hidden="true"></i></div>
  <i class="fa fa-plus" aria-hidden="true" style="font-size: 10px"></i>
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</label>

1
  • 1
    Большое спасибо, это прям то, что нужно)
    – Baium
    5 фев 2021 в 15:58
1

Вариант с применением лёгкой анимации, плюс чуть-чуть js:

var btn = document.getElementsByClassName('btn');
var btn__span = document.getElementsByClassName('btn__span');
btn[0].onclick = function() {
  btn__span[0].classList.add("span__active");
}
.btn {
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  width: 60px;
  height: 30px;
  margin: 30px;
  border-radius: 30px;
  background: #a7c205;
}

.btn__span {
  opacity: 0;
}

.span__active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a7c205;
  border-radius: 30px;
  font-size: 20px;
  opacity: 1;
  transform: scale(1);
  animation: 0.3s linear btn;
}

@keyframes btn {
  0% {
    top: -30%;
    left: -10%;
    width: 0;
    height: 0;
    font-size: 0px;
    transform: scale(1.2);
  }
  10% {
    transform: scale(1);
  }
  100% {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    transform: scale(1);
  }
}

.span__active:before {
  content: "\2714";
  text-align: center;
  line-height: 30px;
  color: #fff;
}
<button class="btn"><span class="btn__span"></span></button>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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