javascript - 为什么我不能为元素设置过渡

Question

我有移动菜单，当点击红色方 block 时，我的移动菜单显示。

问题在图像的右侧，过渡有问题，因为没有应用到它们，因为左边不接受过渡，我尝试将它用于 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。有了 margin 就一样了

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