How to add transition to this javascript function

Question

I am not able to add A transition to this Javascript function.

function togglediv(id) {
    var div = document.getElementById(id);
    div.style.display = div.style.display == "none" ? "block" : "none";
}

As you used the css-transitions tag, did you try to Google "css transition via javascript"? — Ivar
– Ivar, Commented May 11, 2016 at 7:11
Can you post your html too? How are you call your togglediv function. — ozil
– ozil, Commented May 11, 2016 at 7:17

JSchirrmacher · Accepted Answer · 2016-05-11 07:16:51Z

1

The display property cannot be animated.

What you could do is fade in/out by animate opacity. Add a css class 'out' which is defined like

.out {
    opacity: 0;
    transition: opacity 1s;
}

answered May 11, 2016 at 7:09

JSchirrmacher

3,3692 gold badges22 silver badges31 bronze badges

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

1 Answer 1