如何使用javascript在点击事件中滑入div？

Question

我试图在website纯粹使用javascript实现动画中的滑动功能。这两个div在菜单项单击时分别向左和向右缓出，并且在关闭时它会缓和。请帮助我。

<div class="home-page">

<!-- Introduction -->

<div class="introduction " style="background-image:url(assets/img/ocean.jpg);width: 50%;height: 100%; " >

    <!-- <div class="mask">
    </div> -->
    <div class="intro-content">


        <img class="img-responsive brand   hvr-bob" src="assets/img/swipe_large_logo.png">

        <br>


    </div>

    <!-- Social Media Icons [ END ] -->
</div>

<!-- Navigation Menu -->

<div class="menu">
    <div class="profile-btn">
        <img alt="" src="assets/img/about.jpg">

        <div class="mask">
        </div>
        <div class="heading">
            <i class="ion-ios-people-outline hidden-xs"></i>

            <h2>About Us</h2>
        </div>
    </div>

    <!-- Single Navigation Menu Button -->

    <div class="portfolio-btn">
        <img alt="" src="assets/img/portfolio.jpg">

        <div class="mask">
        </div>
        <div class="heading ">
            <i class="ion-ios-briefcase-outline hidden-xs"></i>

            <h2>Our Projects</h2>
        </div>
    </div>

    <!-- Single Navigation Menu Button [ END ]  -->

    <div class="service-btn">
        <img alt="" src="assets/img/service.jpg">

        <div class="mask">
        </div>
        <div class="heading ">
            <i class="ion-ios-lightbulb-outline hidden-xs"></i>

            <h2>Services</h2>
        </div>
    </div>

    <!-- Single Navigation Menu Button [ END ]  -->

    <div class="contact-btn">
        <img alt="" src="assets/img/contact.jpg">

        <div class="mask">
        </div>
        <div class="heading ">
            <i class="ion-ios-chatboxes-outline hidden-xs"></i>

            <h2>Contact</h2>
        </div>
    </div>

    <!-- Single Navigation Menu Button [ END ]  -->

</div>