Adding transform animation to div with jquery has no effect

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


transform is not animated.

add:
this answer was stepped on twice, and the attitude of the landlord's comments also made me very unhappy.

first of all, the backbone of the question is

adding transform animation to div with jquery has no effect

I answered the question and explained that transform has no animation effect.

secondly, when I answered, the landlord did not add the css, so the code related to "animation" could not be seen from all the information provided by the landlord at that time.
I don't know what's wrong with my answer?
Why don't I read the topic seriously?

again, even if the css added by the landlord later is added, it is not clear which class those lines of css are added to.

I don't know what it means to ask such a careless question and blame others for not taking the title seriously!

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3befb-2c2ea.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3befb-2c2ea.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?