为什么我不能设置元素转换

Question

我有手机菜单，点击红色方块时，我的手机菜单显示。

问题是右侧哪里是形象，有过渡的问题，因为没有适用于他们，因为离开不接受过渡，我试图用这个为DIV
fiddle1 这也有动画的问题上图像，检查他们

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; 

设定的最终值，以便您的容器也需要一个初始值

.glavni-kontejner { 
    left:0; 

上面的代码弗朗您的jsfiddle。随着利润率这将是相同的

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