单击按钮即可使jQuery动画化表格

Question

I have three sets of forms on the same page and only one form shown at a time. Forms can be navigated through each of the form's next step button. I would like to integrate a sliding animation/transition to the forms like the following.

I would like a solution using either CSS or jQuery. I tried an approach using CSS but it did not work.

Sample Animation

JS Fiddle

 $(document).ready(function() { $(".form-set form:not(:first-child)").each(function(e) { if (e != 0) $(this).hide(); }); $(".next").click(function() { if ($(".form-set form:visible").next().length != 0) $(".form-set form:visible").next().show().prev().hide(); else { $(".form-set form:visible").hide(); $(".form-set form:first").show(); } return false; }); }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-set"> <form> <h4> Form Set 1 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> <form style="display:none"> <h4> Form Set 2 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> <form style="display:none"> <h4> Form Set 3 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> </div> </div> </div> </div> 

Answer 1

you can do that using plain css using animations & @keyframes as per your requirement.
For the below example I have used moveInRight animation.

Your css should be in this way

.form-1,.form-2,.form-3{
    animation: moveInRight .5s ease-out;

}
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }

    80% {
        transform: translateX(-10px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

Here is the working snippet

 $(document).ready(function() { $(".form-set form:not(:first-child)").each(function(e) { if (e != 0) $(this).hide(); }); $(".next").click(function() { if ($(".form-set form:visible").next().length != 0) $(".form-set form:visible").next().show().prev().hide(); else { $(".form-set form:visible").hide(); $(".form-set form:first").show(); } return false; }); }); 

 .form-1,.form-2,.form-3{ animation: moveInRight .5s ease-out; } @keyframes moveInRight { 0% { opacity: 0; transform: translateX(100px) } 80% { transform: translateX(-10px) } 100% { opacity: 1; transform: translateX(0px) } } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-set"> <form class="form-1"> <h4> Form Set 1 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> <form class="form-2" style="display:none"> <h4> Form Set 2 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> <form class="form-3" style="display:none"> <h4> Form Set 3 </h4> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary next">Next Step</button> </form> </div> </div> </div> </div> 

here is the working fiddle

Answer 2

You could also use CSS transforms and plain JavaScript.

 // Get the elements const red = document.getElementById('red'), green = document.getElementById('green'), blue = document.getElementById('blue'), prev = document.getElementsByClassName('prev-button'), next = document.getElementsByClassName('next-button'); let visible = 1; Array.from(next).forEach(button => { button.addEventListener('click', () => { if (visible === 1) { red.style.transform = 'translateX(-100%)'; blue.style.transform = 'translateX(0)'; } else if (visible === 2) { blue.style.transform = 'translateX(-100%)'; green.style.transform = 'translateX(0)'; } visible ++; }); }); Array.from(prev).forEach(button => { button.addEventListener('click', () => { if (visible === 3) { green.style.transform = 'translateX(100%)'; blue.style.transform = 'translateX(0)'; } else if (visible === 2) { blue.style.transform = 'translateX(100%)'; red.style.transform = 'translateX(0)'; } visible --; }); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; border: none; } #container { position: relative; box-sizing: border-box; overflow: hidden; } .elem { transition: all 1s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #blue, #green { transform: translateX(100%); } #red { background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%); } #blue { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); } #green { background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 

 <div id="container"> <div class="elem" id="red"> <button class="next-button">Next &rarr;</button> </div> <div class="elem" id="blue"> <button class="prev-button">&larr; Back</button> <button class="next-button">Next &rarr;</button> </div> <div class="elem" id="green"> <button class="prev-button">&larr; Back</button> </div> </div> 

Changing the value of translate , you could make the elements animate from and to different directions.