ml92 ml92 - 3 months ago 20
CSS Question

Why I can't set transition for element

I have mobile menu, when click on red square, my mobile menu shows.

Problem is on right side where is image, there is problem with transition, because isn't applied to them, because left not accept transition, I tried using this for div

fiddle1
THis also have problem with animation on image, check them

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


but not working correctly on small phones like 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

For transition an element needs a default value and the end value.

you have the end value set in

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

so your container also needs a starting value

.glavni-kontejner {
    left:0;

The above code is fron your jsfiddle. With margin it would be the same

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