用jquery给div添加transform动画没有效果

Question

1.做了一个动画效果是：点击页面按钮，蒙层下拉覆盖整个浏览器，并且蒙层上的按钮添加一个打开的动画效果，点击按钮再使蒙层上拉消失，同时按钮状态恢复原状，也就是按钮打开关闭是一开一合状态，然后这个按钮是做了两个div也就是两条线,同时向反方向转45度形成一个x号。

2.代码

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.如果 不 加定时器，点击按钮蒙层出现后里面的x号按钮是没有动画效果的为什么？不是同步执行的吗？先出现蒙层再按钮动画，（如果蒙层一直在那么不加定时器动画也是正常的，说明蒙层打开的那段代码还没执行，x号的旋转动画就执行完毕了）