After creating a search modal triggered by jQuery to add the class -open to the main parent div #search-box, I encountered an issue where the #search-box would fade in but the input did not transform as expected. I am currently investigating why this is happening. Check out the complete code on CodePen.
#search-box {
display: none;
position: absolute;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999999;
input {
border-bottom: 2px solid white;
display: block;
width: 100%;
transform: scale3d(0,1,1);
transform-origin: 0% 50%;
transition: transform 3s;
}
&.-open{
background: rgba(0, 0, 0, .8);
display: block;
animation: fadein .8s;
input{
transform: scale3d(1,1,1);
transition-duration: 10s;
transition-delay: 2s;
}
}
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Check out the jQuery below:
$('a[href="#search"]').click(function() {
$("#search-box").addClass("-open");
setTimeout(function() {
inputSearch.focus();
}, 800);
});
$('a[href="#close"]').click(function() {
$("#search-box").removeClass("-open");
});