在菜單上滑動徽標和文本單擊

Question

我正在嘗試使其在您點擊菜單按鈕時，會在徽標和標題中的文本上播放滑動動畫。他們都要向左滑動。菜單滑出屏幕，文字滑入屏幕以替換徽標的位置。除此之外，菜單將會在屏幕上下拉，如下面的js小提琴演示。

我一直在嘗試一段時間來完成這項工作，但沒有運氣。我做了一個JS小提琴來展示我的嘗試：https://jsfiddle.net/n9tjvrjt/

JS小提琴包含比平常更多的代碼，我對此感到抱歉，但我覺得所有的代碼都會對我至關重要展示我的嘗試。我相信關鍵部分是過渡，但由於某種原因，它只是不想工作。我指的是代碼編寫下面

@media only screen and (max-width: 670px) { 
    html body .wrapper .header-wrapper .header-row .header-cell.header-profile { 
    display: none; 
    } 
    html body .wrapper .header-wrapper .header-row .header-cell.header-profile.active { 
    display: table-cell; 
    width: 100%; 
    padding-left: 20px; 
    -moz-transition: 3s; 
    -o-transition: 3s; 
    -webkit-transition: 3s; 
    transition: 3s; 
    } 
    html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active { 
    position: absolute; 
    left: -335px; 
    -moz-transition: 3s; 
    -o-transition: 3s; 
    -webkit-transition: 3s; 
    transition: 3s; 
    } 
} 

正如你將在撥弄看到，代碼的行爲正是我怎麼想，除了動畫從來不玩。我不知道爲什麼，任何幫助最受讚賞。

此外，請忽略長類名稱，它來自爲展示問題而編譯的sass文件。

重要說明，請在測試小提琴時將屏幕大小調整到670像素以下。

Answer 1

您應該爲所有轉型：

html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active { 
 
    position: absolute; 
 
    left: -335px; 
 
    -moz-transition: all .3s ease-in; 
 
    -o-transition:all .3s ease-in; 
 
    -webkit-transition:all .3s ease-in; 
 
    transition: all .3s ease-in; 
 
    }