Input Boxes translateX

Question

I have two input boxes, one for Search and another for an email newsletter signup, in a slideout menu.

These are meant to slide out from the right when the menu is opened, along with the rest of the menu items.

I added the following css code to the menu items and the input boxes:

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

And this is the css code for when the menu is opened:

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

The rest of the menu items are sliding in from the right, but the input boxes aren't. I'm using the following class to the call the search form:

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

I'm using the following class to call the email newsletter signup input:

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

Here's the HTML for the search:

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

Here's the HTML for the Newsletter sign up form:

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

Leave this field empty if you're human:

Answer 1

I've created a basic example to slide in an input field. It adds a class to the form when the button is clicked, which triggers the animation. Hope this helps you.

$("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>