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请求的坐标。

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

我希望这是想要的结果。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

搜索栏的顺利翻译

1 个答案: