glatt Übersetzung von Suchleiste

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>

Ich möchte die Position der Suchleiste ändern, wenn erweitert. Ich möchte es ein wenig übersetzen, aber irgendwie funktioniert mein Code für die Suchleiste nicht. Ich habe auch Animation für die reibungslose Übersetzung von x und y hinzugefügt, aber es scheint auch nicht zu funktionieren.

Answer 1

Ich habe Ihren CSS-Code gereinigt, um nur den benötigten zu lassen.

Ich entfernte die transition und keyframe, weil es nicht funktioniert.

Ich fügte eine position: absolute mit den angeforderten Koordinaten hinzu.

Dann fügte ich eine transform in der expanded Klasse, um eine Bewegung nach links für 100px zu behandeln.

Ich hoffe, es ist das gewünschte Ergebnis.

$('#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>