гладкий перевод строки поиска

Question

$('#toggle').on('click blur', function() { 
 
    $('.morphsearchinput').toggleClass('expanded'); 
 
});

.morphsearchinput { 
 
    -webkit-transition: width .8s , height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 
    transform: translate(200px,100px); \t 
 
    
 
    min-width: 50px; 
 
    min-height: 40px; 
 
    width: 0%; 
 
    height: 0%; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 2s; 
 
    animation-name: example; 
 
    animation-duration: 2s; 
 
} 
 

 
@-webkit-keyframes example { 
 
    from {translate(0px,0px);} 
 
    to {translate(200px,100px);} 
 
} 
 

 

 
@keyframes example { 
 
    from {translate(0px,0px);} 
 
    to {translate(200px,100px);} 
 
} 
 

 
.expanded { 
 
    width: 80% !important; /* !important because min-width is stronger than width */ 
 
} 
 

 

 
body { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="morphsearch-form"> 
 
    <input class="morphsearchinput" type="search" placeholder="Search..." id="toggle" /> 
 
</form>

Я хочу изменить положение панели поиска, когда расширяется. Я хочу немного перевести его, но каким-то образом мой код для панели поиска не работает. Я также добавил анимацию для плавного перевода x и y, но она также не работает.

Answer 1

Я очистил ваш код CSS, чтобы предоставить только необходимый.

Я удалил transition и keyframe, потому что он не работает.

Я добавил position: absolute с требуемыми координатами.

Затем я добавил transform в классе expanded, чтобы обработать перемещение влево на 100 пикселей.

Надеюсь, это желаемый результат.

$('#toggle').on('click blur', function() { 
 
    $('.morphsearchinput').toggleClass('expanded'); 
 
});

.morphsearchinput { 
 
    -webkit-transition: width .8s , height .8s ease, -webkit-transform 2s; 
 
    -moz-transition: width .8s, height .8s ease, -moz-transform 2s; 
 
    -ms-transition: width .8s, height .8s ease; 
 
    -o-transition: width .8s, height .8s ease; 
 
    transition: width .8s, height .8s ease, transform 2s; 
 

 
    min-width: 50px; 
 
    min-height: 40px; 
 
    width: 0%; 
 
    height: 0%; 
 
    
 
    position: absolute; 
 
    left: 200px; 
 
    top: 100px; 
 
} 
 

 
.expanded { 
 
    width: 80% !important; /* !important because min-width is stronger than width */ 
 
    transform: translate(-100px,0px); \t 
 
} 
 

 

 
body { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="morphsearch-form"> 
 
    <input class="morphsearchinput" type="search" placeholder="Search..." id="toggle" /> 
 
</form>