as shown in the figure style, when you click to search, the input box slowly expands from right to left, and when closed, the input box slowly closes from left to right. How to request animation? Thank you
as shown in the figure style, when you click to search, the input box slowly expands from right to left, and when closed, the input box slowly closes from left to right. How to request animation? Thank you
// css
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.open .inp {
width: 30%;
}
.inp {
transition: width 0.65s linear;
width: 15%;
position: absolute;
right: 10px;
}
.inp_txt {
width: 100%;
}
// html
<div class="box">
<div class="inp">
<input class="inp_txt" type="text">
</div>
</div>
//js
window.$ = window.$ || function (el) {
var d = document;
if (typeof el == 'string') {
el = el.indexOf('.') != -1 ? d.getElementsByClassName(el.replace(/\./, '')) :
el.indexOf('-sharp') != -1 ? d.getElementById(el.replace(/\-sharp/, '')) :
d.querySelector(el);
}
return el;
}
$('.inp_txt')[0].onfocus = function () {
$('.box')[0].className += ' open';
}
$('.inp_txt')[0].onblur = function () {
var el = $('.box')[0];
el.className = el.className.replace(/\s+open/, '');
}transition animation, the width slowly expands
Previous: Postcss-px-to-viewport configuration issu
Next: How does react realize the routing jump by clicking on the element?
problem description my two CSS animation animations are written in shorthand once, the animated move ends in 5s, and the animated go is innumerable loops. what I want to achieve is that when the animation move ends, it stays at the last frame, and th...