День добрый, мне нужно сделать такую анимацию , как показана на гифке в реакт-приложении без JQuery, я пытался найти хоть что-то похожее в интернете, чтоб адаптировать код под себя, но не нашел. Буду благодарен за любые ссылки, которые могут помочь с решением данного вопроса, ну или если кто-то сталкивался с чем-то похожим, так же буду благодарен за код.
Добавить комментарий
|
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
Вариант с применением лёгкой анимации, плюс чуть-чуть 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>