Question

我在幻灯片菜单中有两个输入框，一个用于搜索，另一个用于电子邮件简报注册。

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

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

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

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

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

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

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

我使用以下课程来调用电子邮件简报注册输入：

.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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

输入框translateX

1 个答案: