New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fadeIn() breaking appended transition #824

Closed
Windsooon opened this Issue Feb 24, 2016 · 4 comments

Comments

2 participants
@Windsooon

Windsooon commented Feb 24, 2016

  var $elems = $(elems);
  var $elems = $(elems).hide();
  $container.append($elems);
  $container.imagesLoaded(function(){
  $elems.fadeIn(500);
  $container.masonry('appended', $elems);  

This work prefect when I using jquery.masonry.js, but when I use newest masonry.js, the elems append animation become strange. Thanks for any help

@desandro

This comment has been minimized.

Owner

desandro commented Feb 24, 2016

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

@Windsooon

This comment has been minimized.

Windsooon commented Feb 25, 2016

http://codepen.io/WindsonYang/pen/eZOzLx/ here is my code, but because of "Access-Control-Allow-Origin" here, the ajax call won't work.Sorry for that, and I found is not related to the new vision, both will have this problem.

@desandro

This comment has been minimized.

Owner

desandro commented Feb 25, 2016

Thanks for that. I believe fadeIn, is the issue. This will conflict with Masonry's hide/reveal transitions.

Try:

var $elems = $(elems).hide();
$container.append($elems);
$container.imagesLoaded(function(){
    $elems.show();
    $container.masonry('appended', $elems); 
});

You can disable the scale transition on appended with hiddenStyle and visibleStyle options. Similar to Isotope

var $container = $('#posts-container').masonry({
    columnWidth: 20,
    itemSelector: '.post-container',
    isFitWidth: true,
    transitionDuration: '0.5s',
    hiddenStyle: { opacity: 0 },
    visibleStyle: { opacity: 1 }
});

@desandro desandro changed the title from Animation not working when moving to New Vision. to fadeIn() breaking appended transition Feb 25, 2016

@Windsooon

This comment has been minimized.

Windsooon commented Feb 26, 2016

Thank you, it works!

@desandro desandro closed this Feb 26, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment