Use javascript .style with css transitions

Question

I want to have my javascript element.style.visibility = 'visible'; and I need it to fade using the CSS transition I have. It doesn't currently fade it is just a snap transition. NB: I need to use JS not jQuery.

JS:

function removeOverlay () {
        var a = document.getElementById('overlay');
        a.style.visibility = 'hidden';
    }
}

// In another function
document.getElementById('overlay').style.visibility = 'visible';

HTML:

<div id='overlay' onclick='removeOverlay()'>
        <span>Please enter a number e.g. 7.50</span>
    </div>

CSS:

#overlay {
    visibility: hidden;
    background-color: rgba(0,0,0,.85);
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: 9999;
    position: absolute;
    -webkit-transition: visibility 0.5s ease;
    transition: visibilty 0.5s ease;
}

#overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

#overlay span {
    color: white;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Thanks :)

i feel this is unclear. I have no idea what you actually want — Fallenreaper
– Fallenreaper, Commented Jan 7, 2014 at 19:10
Try toggle a class on and off, then do the transitions in CSS. — elclanrs
– elclanrs, Commented Jan 7, 2014 at 19:10
Currently when using .style.visibility property changer, I am getting snap transitions. I want them to fade as specified in the CSS — user3105607
– user3105607, Commented Jan 7, 2014 at 19:12

Michael Benin · Accepted Answer · 2014-01-07 20:56:09Z

2

I don't believe visibility can be animated as it only takes 2 values. You should use opacity.

answered Jan 7, 2014 at 20:56

Michael Benin

4,3222 gold badges25 silver badges15 bronze badges

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

2 Comments

user3105607 Over a year ago

okay im using opacity and height to make it not clickable, it fades in fine however the fade out is snappy?

Michael Benin Over a year ago

You can add easing and other properties to take advantage of hardware acceleration.

LcSalazar · Accepted Answer · 2014-01-07 19:48:18Z

0

If your problem is just fading, and css transform is not extremely necessary, maybe you would be better off using a javascript approach. You could apply the fade effect using "setTimeout" and the ".style.opacity" property of the DOM element. The method could work like this:

function FadeIn(id, opacity) {
    var element = document.getElementById(id);

    if(opacity == null)
        opacity = 0;

    SetOpacity(element, opacity);
    if(opacity < 100)
    {
        setTimeout(function() {
            FadeIn(id, opacity+10);
        }, 100);
    }
}

function FadeOut(id, opacity) {
    var element = document.getElementById(id);

    if(opacity == null)
        opacity = 100;

    SetOpacity(element, opacity);
    if(opacity > 0)
    {
        setTimeout(function() {
            FadeOut(id, opacity-10);
        }, 100);
    }
}

function SetOpacity(element, value) {
    element.style.opacity = value / 100;
    element.style.filter = "alpha(opacity=" + value + ")";
}

//Then call it like this:
FadeOut("div_id");

Yes, css transitions are actually lighter than js built ones. But for better control over timing and to apply the effect over many objects as you want, js can be very handy.

answered Jan 7, 2014 at 19:48

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

1 Comment

user3105607 Over a year ago

ok, would you be able to explain why my current one doesnt work? or the procedure to change the styles and get them to fade with the .style method? thanks a lot :)

Henry Gibson · Accepted Answer · 2014-10-08 23:16:34Z

You can solve this by adding or removing a class from the object, and then having two sets of CSS transitions - one for the transition in and one for the transition out. They will have both opacity and visibility properties but different delay values, and potentially could have different durations and easing methods too.

Here is some example CSS. I've included only the CSS relevant for the transition, not any descriptive properties about the object itself.

/* fade out */
#hiddenobject {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -moz-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -ms-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    -o-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
    transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
}

/* fade in */
#hiddenobject.showobject {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -moz-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -ms-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    -o-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
    transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
}

In this case we have an object with an ID of 'hiddenobject' which is hidden from view. It has both an opacity of zero and the visibility attribute is hidden. We will add a class of 'showobject' to it, which will cause the item to be displayed, with an opacity of 1 and visibility of visible.

Visibility can only have two states really, it's either visible or it's not - there is no grey area in-between. So to show a fade we need to use the opacity property. The difficulty with opacity is that something with an opacity of 0 will still be present on screen - it can be clicked on, interacted with etc. which may not be desirable. The solution is to use both properties together.

When we add the 'showobject' class we transition the opacity from it's current value of 0 to it's new value of 1 with a duration of 500ms, or half a second. The delay attribute of that transition is set to 0 seconds, so it happens immediately. The visibility of that object was hidden, so in order to witness this fade in we need to immediately transition the visibility property to it's new state of visible. This transition has both a duration and delay of 0s, so it happens instantly - I've put linear easing as there is no need for any easing really, so may as well keep it simple - that's personal preference. So now our object is visible the moment we add the class and we see it fade in.

When we remove the class we want the fade to happen a bit quicker, so our default transition for the object has an opacity duration of 200ms, a fifth of a second. If we changed the visibility to hidden straightaway however we wouldn't see the fade at all, it would just disappear. So we have to delay the transition by a value equal to the length of the fade - in this case 200ms. Now our object completes it's fade to 0 opacity before changing it's visibility to hidden.

The visibility transition on the showobject class is pretty much what would happen with that property by default - an instant change - but we need to define it there to overwrite the delayed transition we've set on the element default.

Collectives™ on Stack Overflow

Use javascript .style with css transitions

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related