Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Apr 2015
    Posts
    1
    Member #
    48749

    Transition only working with firefox

    hi All,

    Not sure if I have to post this under javascript or css since I don't know what is causing the problem.

    I made a basic website with an animation and a transition.
    If you click 1 of the 5 columns / bars then the one clicked goes animated to fullscreen like it's supposed to.
    If you click on the fullscreen version to close it then the text field collapses with jquery. This works on all browsers. After that it should transition to the bar/column again but it only does that in firefox. In the other browsers I tested (chrome / safari) it goes instant.

    The way I have it now is if you are fullscreen (focus) and click then it collapses the text and has a callback where it adds a class transition:

    Code:
    $story.slideUp("fast", function() {  
                    $item.addClass("transition"); 
                    $item.removeClass("focus");
                });
    The css class:

    Code:
    .transition {
         -webkit-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
         -moz-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
         -o-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
         -ms-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
         transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
    }
    Here I have the whole thing in a jsfiddle:

    Edit fiddle - JSFiddle

    Hope someone can help.

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 09:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com