CODEWITHSUNDEEP
javascriptandroidjqueryhtmlcss
Maka
Maka

Reputation: 25

CSS transition does not work on mobile

Please have a look at the animation below. While you may see that it works on PC, there must be something wrong since it does not work on mobile. For example on Android, the image is zoomed and with opacity 1 from the very beginning. I assume that the transition has been made but the duration was 0s. Thank you for your help. 

$(document).ready(function(){
    $(".photo").css(" -moz-transform", "scale(1.2)");
    $(".photo").css("-webkit-transform", "scale(1.2)");
    $(".photo").css("-o-transform", "scale(1.2)");
    $(".photo").css("opacity", "1");
    $(".photo").css("transform", "scale(1.2)");
});
.photo {
    display: inline-block;
    vertical-align:top;
    max-width:100%;
    opacity: 0.1;
    -moz-transition: transform 40s, opacity 6s;
    -webkit-transition: transform 40s, opacity 6s;
    transition: transform 40s, opacity 6s;
}
.photoDiv {
    display: inline-block;
    background-color: #f1f1f1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photoDiv">
        <img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

Upvotes: 0

Views: 965

Answers (1)

SuperDJ
SuperDJ

Reputation: 7661

I think it's cleaner to remove the CSS from JS. Also jQuery is redundant and way too big for what you are trying to do here. Also make sure to add the JS at the end of the body. This way you are sure the content is loaded before JS will even be loaded.

window.addEventListener('load', function() {
  var photos = document.getElementsByClassName('photo');

  if( photos )
  {
    for( var i = 0; i < photos.length; i++ )
    {
      var photo = photos[i];
      photo.classList.add('active');
    }
  }
});
.photo {
    display: inline-block;
    vertical-align:top;
    max-width:100%;
    opacity: 0.1;
    /*ease-in-out is the animation, 2s is the delay/ pause*/
    transition: transform 40s ease-in-out 2s, opacity 6s ease-in-out 2s;
    transform: scale(1);
}

.active {
  opacity: 1;
  transform: scale(1.2);
}

.photoDiv {
    display: inline-block;
    background-color: #f1f1f1;
    width: 100%;
    position: relative;
    overflow: hidden;
}
<div class="photoDiv">
  <img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>

Upvotes: 1

Related Questions