要素のトランジションを設定できない理由

Question

モバイルメニューがあります。赤い四角をクリックすると、モバイルメニューが表示されます。それらに適用されていないため、移行を受け入れない左ので

問題はイメージです右側にあり、移行に問題が、そこにある、私は、これはまた、上のアニメーションに問題がある fiddle1 のdiv
のためにこれを使用してみました画像、...彼らに

left:0px, 
margin-left:250px; 

ではなく、Iphone 4のような小さな携帯電話で正しく動作を確認し fiddle2

$("#show-mobile-navigation").on('click', function() { 
 
    $('.glavni-kontejner').toggleClass("show-mob-nav"); 
 
    $('#mobile-navigation').toggleClass("show-mob-nav2"); 
 
});

.glavni-kontejner { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2s ease; 
 
    -ms-transition: all 0.2s ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
#show-mobile-navigation { 
 
    width: 40px; 
 
    height: 40px; 
 
    background-color: #ea1111; 
 
    position: absolute; 
 
    left: 15px; 
 
    top: 10px; 
 
    text-align: center; 
 
    z-index: 9999999999999; 
 
} 
 
#show-mobile-navigation i { 
 
    color: #fff; 
 
    font-size: 25px; 
 
    margin-top: 8px; 
 
    margin-left: -5px; 
 
} 
 
#mobile-navigation { 
 
    margin-top: 151px; 
 
    border-right: 3px solid #dc3128; 
 
    position: fixed; 
 
    top: 0; 
 
    left: -250px; 
 
    width: 250px; 
 
    height: 100%; 
 
    padding: 5px 0; 
 
    background-color: #dc3128 !important; 
 
    overflow-y: scroll; 
 
    z-index: 9999999999999; 
 
    padding-bottom: 140px; 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2s ease; 
 
    -ms-transition: all 0.2s ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
#mobile-navigation ul { 
 
    margin-top: 30px; 
 
} 
 
#mobile-navigation li { 
 
    display: block; 
 
    margin-bottom: 15px; 
 
} 
 
#mobile-navigation ul li:last-child { 
 
    padding-bottom: 15px; 
 
} 
 
#mobile-navigation li a { 
 
    font-family: Bold; 
 
    color: #fff; 
 
    font-size: 14px; 
 
} 
 
.show-mob-nav { 
 
    left: 0px; 
 
    margin-left: 250px; 
 
    overflow: hidden !important; 
 
    position: fixed !important; 
 
    height: auto !important; 
 
    width: 100% !important; 
 
} 
 
.show-mob-nav #show-mobile-navigation { 
 
    left: 250px !important; 
 
} 
 
.show-mob-nav #mobile-navigation { 
 
    left: 250px !important; 
 
    overflow-y: scroll !important; 
 
} 
 
.show-mob-nav2 { 
 
    left: 0px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="show-mobile-navigation" class="container-fluid nopadding"> 
 
    <i class="fa fa-bars" aria-hidden="true"></i> 
 
</div> 
 
<div id="mobile-navigation"> 
 
    <ul> 
 
    <li><a href="veleprodaja.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="maloprodaja.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="#"> Lorem </a> 
 
    </li> 
 
    <li><a href="#"> Lorem </a> 
 
    </li> 
 
    <li><a href="igraonica.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="servis.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="brendovi.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="firma.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="lokacija.php"> Lorem </a> 
 
    </li> 
 
    <li><a href="kontakt.php"> Lorem </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="glavni-kontejner"> 
 
    <<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt=""> 
 
</div> 
 
</div>

Answer 1

要素の遷移には、デフォルト値と終了値が必要です。

あなたは

.show-mob-nav { 
    left: 250px; 

に設定された終了値を持っているので、あなたのコンテナも、上記のコードは、あなたのjsfiddleをフロンされる開始値

.glavni-kontejner { 
    left:0; 

を必要とします。 。余裕を持って、それは私はあなたが使用することをお勧めします同じ

.show-mob-nav { 
    margin-left: 250px; 
} 
.glavni-kontejner { 
    margin-left:0; 
}