CODEWITHSUNDEEP
jquerycsscss-transitions
Michael
Michael

Reputation: 742

css3 transition not working?

So I have a dialog window that I am trying to make "slide" in from the right side of the screen when it displays.

This is the css for the dialog itself:

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    padding: 70px 10% 160px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    width: 90%;
    right: -100%;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: right;
    -moz-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
    z-index: 9;
}

In my javascript, I have code that determines whether or not the "dialog" is empty...if it's NOT empty, a "dialog-open" class is added to the body which enables the "dialog" to be shown via a "display:block" property.

body.dialog-open .dialog {
    display: block;
    right: 0;
}

My issue is that I want that dialog to slide in from the right rather than just "show" - not sure what I'm doing wrong....any help would be appreciated.

Upvotes: 1

Views: 99

Answers (2)

Michael
Michael

Reputation: 7092

Instead of display: none/block; use visibility: hidden/visible;

The display property can not be animated, hence why you don't see your transition.

Upvotes: 2

jonsuh
jonsuh

Reputation: 2875

Remove display: none from .dialog. And respectively you don't need display:block for body.dialog-open .dialog

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 70px 10% 160px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    width: 90%;
    right: -100%;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: right;
    -moz-transition-property: right;
    -o-transition-property: right;
    transition-property: right;
    z-index: 9;
}

body.dialog-open .dialog {
    right: 0;
}

A suggestion, instead of transitioning left/right/top/bottom positioning, you'd want to use CSS transforms and translateX/translateY because they're GPU accelerated. Using GPU-acclerated CSS will allow for better performance and smoother transitions/animations. Here's a working example and the code:

JSFiddle: Example

.dialog {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 70px 10% 160px 0;
    position: fixed;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
    width: 90%;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform: translateX(150%);
    -moz-transform: translateX(150%);
    -o-transform: translateX(150%);
    transform: translateX(150%);
    z-index: 9;
}

body.dialog-open .dialog {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

Upvotes: 1

Related Questions