CSS transition not functioning

Question

I'm adding a class with jQuery when a user click on a thumbnail to give an animation effect with the margin-top property but it doesn't seem to be working and i'm not sure why so i'm wondering someone could explain it to me. code below:

CSS:

.content {
  position: relative;
  width: 60%;
  height: auto;
  transition: all 200ms ease-in-out; }

  .content img {
    margin-top: -150px;
    width: 100%;
    height: auto;
    transition: all 900ms ease-in-out; }

    .content img.img-is-showing {
      margin-top: 0; }

JS:

$(document).ready(function(){

$('.lightbox-trigger').on('click', function(){
var image_href = $(this).attr('href');
$('.lightbox').addClass('is-showing');
$('.content img').addClass('img-is-showing');

$('.lightbox-image').attr('src', image_href);
$('.lightbox').show();

$('.lightbox').on('click', function(){
  $(this).removeClass('is-showing');
});

});
});

I have done the same type of animation using the opacity property on the ".lightbox" class and it's working fine but I'm not sure why the margin-top animation won't work.

The url for the site is Here

lagboy · Accepted Answer · 2015-09-05 12:53:02Z

3

I might be wrong here, but I feel the problem is related to the fact that you're adding the class .img-is-showing to the image before you're actually showing the lightbox.

answered Sep 5, 2015 at 12:53

lagboy

944 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ironmike Over a year ago

Yeah that seem like it could be the problem. How would you fix this? an if function in the js?

lagboy Over a year ago

Cole's answer seems to fix it for the most part! Do check.

Coal Kettler · Accepted Answer · 2015-09-05 13:56:53Z

2

As stated in lagboy's answer, since the lightbox is hidden, adding .img-is-showing before the lightbox is shown won't visibly affect any positioning properties. Hence, no animation.

Additionally, you need to remove .img-is-showing when the image is dismissed if you want the animation to appear on subsequent clicks.

This gets it to work better:

$('.lightbox-trigger').on('click', function(){
  var image_href = $(this).attr('href');

  $('.lightbox').addClass('is-showing');
  $('.lightbox-image').attr('src', image_href);
  $('.lightbox').show();

  $('.content img').addClass('img-is-showing');

  $('.lightbox').on('click', function(){
    $(this).removeClass('is-showing');
    $('.content img').removeClass('img-is-showing');
  });
});

It definitely still needs some work, but at least you're getting your transition.

A few additional tweaks:

You keep on binding duplicate .lightbox click events with your removeClass handler. Consider cleaning them up by unbinding after triggering or binding outside of the body of the .lightbox-trigger click handler. It won't kill you at this scale, but it's messy and can cause trouble down the line.
Consider caching your more frequently used selectors (e.g. $('.lightbox')) outside of the event handler for a little performance boost. Again, small scale, but good habit.

answered Sep 5, 2015 at 13:56

Coal Kettler

4914 silver badges11 bronze badges

2 Comments

ironmike Over a year ago

Thanks Cole! Works perfectly, I've learned what the problems is and you suggested future improvements, perfect answer to my question, I really appreciate it! I want to implement the tweaks you suggested however, I'm really new to jquery/JS so don't understand what you mean "binding duplicate .lightbox click events" and "Consider caching your more frequently used selectors" - could you possibly explain these to me a little further. Thanks again!

Coal Kettler Over a year ago

@ironmike Sure - for caching, I just mean save the output to a variable in scope (i.e. within the $(document).ready callback), so you don't keep searching the DOM unnecessarily, and you can just refer to that variable. See here for a quick explanation and a few pitfalls. For not binding duplicate events, see .one(), which aims to fix this sort of problem. Events bound with .on() stack. :)

Collectives™ on Stack Overflow

CSS transition not functioning

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related