搜索栏的流畅翻译

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); 
    
    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。

然后，我在 expanded class 中添加了一个 transform 来处理向左移动 100px。

我希望这是想要的结果。

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


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>

搜索栏的流畅翻译

smooth translation of Search bar

html

javascript

css

css-transforms