1. Made an animation effect is: click the page button, the mask drop down to cover the entire browser, and the mask on the button to add an open animation effect, click the button and then pull up the mask disappear, while the button state to restore the original state, that is, the button to open and close is a state of opening and closing, and then this button is to do two div, that is, two lines, while turning 45 degrees in the opposite direction to form an x number.
2. Code

var deg1 = 0;
var deg2 = 0;
$(".let-talk-btn").on("click",function () {
            //
            $(".cover-info").css("display","block").addClass("height-extension");
            //
            $(".cover-content").css("display","block");
            deg2 += 45;
            deg1 -= 45;
            //
            setTimeout(function () {
            //x
            //45
                $(".close .left").get(0).style.transform="rotate(" + deg2 + "deg)";
                //-45
                $(".close .right").get(0).style.transform="rotate(" + deg1 + "deg)";
            },10)
        })

css:

transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;

3. If you do not add a timer, there is no animation effect on the x button after clicking the button mask. Why? Isn"t it executed by Synchronize? The animation of the mask and then the button appears first. (if the mask has been there all the time, it is also normal to animate without a timer, indicating that the rotation animation of the number x is finished before the code opened by the mask is executed.)