输入框翻译X

Question

我在滑出式菜单中有两个输入框，一个用于搜索，另一个用于电子邮件通讯注册。

这些是为了在打开菜单时从右侧滑出，以及其他菜单项。

我在菜单项和输入框中添加了以下 css 代码：

opacity: 0;
transition: all 0.4s ease;
transform: translateX(10px);

这是打开菜单时的 css 代码：

opacity: 1;
transform: translateX(0px);

其余菜单项是从右侧滑入的，但输入框不是。我正在使用以下 class 调用搜索表单：

.shiftnav.shiftnav-shiftnav-main.shiftnav-open-target .grid-search .searchform .search-table .search-field input

我正在使用以下 class 调用电子邮件简报注册输入：

.shiftnav.shiftnav-shiftnav-main.shiftnav-open-target form#mc4wp-form-1

这是搜索的 HTML：

      <div class="grid-search"><form role="search" class="searchform" method="get" action="http://test.unknowndesign.co.za/">
<div class="search-table">
    <div class="search-field">
        <input type="text" value="" name="s" class="s" placeholder="Search the site">
    </div>
    <div class="search-button">
        <input type="submit" class="searchsubmit" value="">
    </div>
</div>

这是通讯注册表单的HTML：

    <form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-515" method="post" data-id="515" data-name="Newsletter"><div class="mc4wp-form-fields"><p>
<input type="email" name="EMAIL" placeholder="Sign up for our newsletter" required="">

如果您是人类，请将此字段留空：

Answer 1

我创建了一个在输入字段中滑动的基本示例。它会在单击按钮时向表单添加一个 class，从而触发动画。希望对你有帮助。

$("button").on("click", function() {
  $(".searchform").toggleClass("opened");
});

.grid-search {
padding: 10px 0 0 100px;
}
.searchform {
  opacity: 0;
  transition: all 0.4s ease;
  transform: translateX(10px);
}

.searchform.opened {
  opacity: 1;
  transform: translateX(0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div class="grid-search">
  <form role="search" class="searchform" method="get" action="http://test.unknowndesign.co.za/">
    <div class="search-table">
      <div class="search-field">
        <input type="text" value="" name="s" class="s" placeholder="Search the site">
      </div>
      <div class="search-button">
        <input type="submit" class="searchsubmit" value="">
      </div>
    </div>
  </form>
</div>

输入框翻译X

Input Boxes translateX

css

transition

translate-animation