点击按钮滑动隐藏或者滑动出现

点击查看效果https://www.bilibili.com/video/BV1Ty4y1E7CT

主要使用CSS3的@keyframe规则实现滑动隐藏和出现的效果

<div class="clock-container clock-container-show">
        <div class="clock-icon">
            <div class="hidden1" onclick="hiddenClock()">clock</div>
            <div class="show1" onclick="showClock()">clock</div>
            <!--<img src="assets\images\clock-icon.png" alt="">-->
        </div>
</div>

这一段代码是按钮部分，类名为”hidden1″的div是点击隐藏的按钮，类名为”show1″的div是点击出现的按钮。

css样式：

<style>

.clock-container-hidden {

            animation: hidden 3s;

            -moz-animation: hidden 3s;

            

            -webkit-animation: hidden 3s;

            

            -o-animation: hidden 3s;

            

        }

         

        .clock-container-show {

            animation: show 3s;

            -moz-animation: show 3s;

            

            -webkit-animation: show 3s;

            

            -o-animation: show 3s;

            

        }

         

        .clock-icon {

            float: left;

            width: 50px;

            height: 50px;

            border-radius: 25px;

        }

           

        .hidden1 {    

            position: relative;

            color: #fff;

            z-index: 999;

            width: 50px;

            height: 50px;

            line-height: 50px;

            text-align: center;

            display: block;

            border-radius: 25px;

            background: #5e63b6;

        }

         

        .show1 {

            color: #fff;

            width: 50px;

            height: 50px;

            line-height: 50px;

            text-align: center;

            display: none;

            border-radius: 25px;

            background: #a393eb;

        }      

         

        @keyframes hidden {

            from {

                right: 0;

            }

            to {

                right: -504px;

            }

        }

         

        @keyframes show {

            from {

                right: -504px;

            }

            to {

                right: 0;

            }

        }

    </style>

属性animation的值@keyframe选择器的名称，@keyframe hidden是向右隐藏的一个过程，@keyframes show是向左出现的一个过程。

var clockContainerNode = document.querySelector('.clock-container');

var hiddenNode = document.querySelector('.hidden1');

var showNode = document.querySelector('.show1');

function hiddenClock() {

    hiddenNode.style.display = "none";

    showNode.style.display = "block";

    clockContainerNode.style.right = "-504px";

    clockContainerNode.classList.remove("clock-container-show");

    clockContainerNode.classList.add("clock-container-hidden");

};

function showClock() {

    hiddenNode.style.display = "block";

    showNode.style.display = "none";

    clockContainerNode.style.right = "0";

    clockContainerNode.classList.remove("clock-container-hidden");

    clockContainerNode.classList.add("clock-container-show");

}

hiddenClock函数和showClock函数就是在点击隐藏或者出现按钮时将其换成出现或隐藏按钮，并且能够执行动画。