Css 输入框translateX

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

当菜单打开时，这些菜单项与其他菜单项一起从右侧滑出

我在菜单项和输入框中添加了以下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="">

---

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

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

$（“按钮”）。在（“单击”，函数（）{
$（“.searchform”）.toggleClass（“打开”）；
});
.grid搜索{
填充：10px 0 100px；
}
.searchform{
不透明度：0；
过渡：所有0.4s缓解；
转换：translateX（10px）；
}
.searchform.opened{
不透明度：1；
转换：translateX（0px）；
}

点击我
不要共享外部站点。用相关代码制作一个可工作的SO代码片段，以复制您的problem@MihaiT我现在就想到了。删除了外部链接。如何制作工作代码段？发布/编辑时，您将在顶部工具栏中看到带有
符号的图标。（靠近图像图标）。单击它，然后您可以添加html/css/javascript并制作一个工作片段