用jquery給div添加transform動畫沒有效果

1.做了一個動畫效果是：點擊頁面按鈕，蒙層下拉覆蓋整個瀏覽器，并且蒙層上的按鈕添加一個打開的動畫效果，點擊按鈕再使蒙層上拉消失，同時按鈕狀態(tài)恢復(fù)原狀，也就是按鈕打開關(guān)閉是一開一合狀態(tài)，然后這個按鈕是做了兩個div也就是兩條線,同時向反方向轉(zhuǎn)45度形成一個x號。
2.代碼

var deg1 = 0;
var deg2 = 0;
$('.let-talk-btn').on('click',function () {
            //蒙層面板打開以及添加動畫類名
            $('.cover-info').css('display','block').addClass('height-extension');
            //使蒙層中的內(nèi)容出現(xiàn)
            $('.cover-content').css('display','block');
            deg2 += 45;
            deg1 -= 45;
            //加了一個定時器
            setTimeout(function () {
            //x號按鈕
            //一根線轉(zhuǎn)45度
                $('.close .left').get(0).style.transform="rotate(" + deg2 + "deg)";
                //另一根線轉(zhuǎn)-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.如果 不 加定時器，點擊按鈕蒙層出現(xiàn)后里面的x號按鈕是沒有動畫效果的為什么？不是同步執(zhí)行的嗎？先出現(xiàn)蒙層再按鈕動畫，（如果蒙層一直在那么不加定時器動畫也是正常的，說明蒙層打開的那段代碼還沒執(zhí)行，x號的旋轉(zhuǎn)動畫就執(zhí)行完畢了）