jQuery toggleClass() & CSS3 Transition Issues

[pmac627]

Ok. I tried to make a reduced test-case in codepen and actually ended up having an example that couldn’t do anything on mobile (despite most of the features working on my site). I will continue to work on the codepen and will post a link if and when I get it working.

http://new.mactimdesign.com/

On mobile devices, be it my Razr Maxx, iPad 2 or iPod, 3rd Gen, I cannot get the popup to work. It works great in all browsers via desktop (IE does its skip of the transitions).

When you tap on the small circles, the center image does change. But when you tap on the center image to enlarge it, nothing happens. Now, you can tap it 100 times and I know that the toggleClass() (you might note in source view that I’ve even tried an addClass(), removeClass() version) is firing because if you tap the center image an odd number of times (1, 3, 5, etc) then tap one of the small circles, the center image changes and when it comes back it is in full screen mode. Still following?

I’ve more or less traced the issue to the CSS3 animation not displaying when the class is added.

How can I get the mobile browsers to respect animation changes triggered by a second class being added or removed from an element AFTER the webpage has finished loading?

// JAVASCRIPT
$(‘.main-image’).bind(“click touch”, function(me){
if (me.target == this && $(this).attr(‘title’) != “”) { // Makes Sure Clicking Title Bar Doesn’t Trigger Closing
var height = $(this).attr(‘data-height’);
$(“.main-image”).toggleClass(‘main-image-full’);
if($(‘.main-image’).is(‘.main-image-full’)) {
$(‘.main-image-full’).css(“height”, height + “px”);
} else {
if(window.innerWidth >= 320 && window.innerWidth <= 479) {
$(“.main-image”).css(“height”, “182px”);
} else if(window.innerWidth >= 480 && window.innerWidth <= 767) {
$(“.main-image”).css(“height”, “280px”);
} else if(window.innerWidth >= 768 && window.innerWidth <= 1139) {
$(“.main-image”).css(“height”, “448px”);
} else {
$(“.main-image”).css(“height”, “700px”);
}
}
$(“.blackout”).toggleClass(‘blackout-on’);
}
});

// CSS
.main-image, .main-image-full {
display: inline-block;
position: relative;
z-index: 999;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

.main-image {
width: 700px;
height: 700px;
border-radius: 400px;
background-size: 700px 700px;
font-size: 0;
border: 1px solid #898989;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.75) inset;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.75) inset;
background: #FFFFFF top center no-repeat url(‘../img/starter.jpg’);
-webkit-transition: width 2s, height 2s, background-position 2s, border-radius 2s, box-shadow 2s;
-moz-transition: width 2s, height 2s, background-position 2s, border-radius 2s, box-shadow 2s;
-o-transition: width 2s, height 2s, background-position 2s, border-radius 2s, box-shadow 2s;
transition: width 2s, height 2s, background-position 2s, border-radius 2s, box-shadow 2s;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}

.main-image-full {
width: 1024px;
height: 1024px;
background-position: 0 0;
border-radius: 0;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}

[pmac627]

Just an update for anyone who might ever run into the same issue.

Turns out, visibility is not an accepted property for transition on mobile devices to date. It works fine in desktop browsers, but not on mobile ones. My code above had nothing to do with the problem.

Does anyone have a list of browser support for transition properties? Every list I have found is over 2 years old.

[rosspenman]

The rule-of-thumb I use is that if a property is numerical, it will probably transition, if not, it probably won’t.

Another way of looking at it is if the animation makes sense halfway. For example, halfway through an animation from `opacity: 0;` to `opacity: 1;`, the opacity will be 0.5.

Something like visibility can’t transition because it doesn’t make sense halfway through the transition.

That’s my understanding of it, anyway.

[Author]

Posts