Is it possible to use transitions with display none to display block

Question

I'm still developing a genius forum for my website. I want to add some fancy javascript effects. I don't want to use jQuery for now.

My problem is the following: I have an element which appears by checking if the value of the function is true or false. With those check my article shows or hides.

My question is: Is it possible to use transitions so that my block drops down like the way transitions do?

The first js function describes the check and the next function hides or show my article when the values are not empty.

    function CheckEmptyValues() {
    var inputFields = document.getElementsByTagName('input');
    var textFields = document.getElementsByTagName('textarea');
    var postData = [inputFields, textFields];

    for(var i=0; i<postData.length; i++) {
        for(var j=0; j<postData[i].length; j++) {
            if(postData[i][j].value !== '') {
                return false;
            }
        }
    }
    return true;
}

function showPreview() {
    if (CheckEmptyValues() === false) {
        this.prevPost.style.display = "block";
    }
    else {
        this.prevPost.style.display = "none";
    }
}

When my emptyvalues are false the article appears and if not, it disappears. But when this happens you see only show or hide, no further effect or something.

I want to make this something like this effect: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

The height value should start with 0 and end with 150 height or something like that. Does anyone have a solution how to make this look cool?

Thanks in advance.

score 2 · Answer 1 · edited May 23 '17 at 11:43

2

No, you can't, display is defined as non animatable.

If you want workarounds, see CSS3 Animation and Display None.

edited May 23 '17 at 11:43

Community

1
1

answered Feb 12 '15 at 18:09

Oriol

274,082
63
437
513

Mihir Ujjainwal · Answer 2 · 2015-02-12T18:24:03.217

1

No, display doesn't come in transition-property. But, you can try opacity and for the display:block , put it in your div:hover or only div css.

edited Feb 12 '15 at 18:24

answered Feb 12 '15 at 18:13

Mihir Ujjainwal

140
2
13

sorry, not `visibility `, its `opacity` – Mihir Ujjainwal Feb 12 '15 at 18:23
the div is hidden by using display:none, not by using opacity:0, so I don't understand what you mean? – NielsDePils Feb 12 '15 at 18:27
that effect is not what I was looking for:) You can compare it to the animate function of jQuery – NielsDePils Feb 12 '15 at 18:28
I'm saying if you want transition, use `opacity` property instead of `display` and as your requirements to make text appear in a `block`, in the `:hover` css make it `display:block`. Look [fiddle now](http://jsfiddle.net/3k2La5ok/5/) – Mihir Ujjainwal Feb 12 '15 at 18:31
http://jsfiddle.net/3k2La5ok/6/ when you type something into the inputfield you see hide and showing a div – NielsDePils Feb 12 '15 at 18:50
[JSFIDDLE](http://jsfiddle.net/3k2La5ok/9/) try the "firstname" input. Are you talking about something like this. – Mihir Ujjainwal Feb 12 '15 at 19:07
No, what you did was using an onclick function to hide or show the text beneath the input. What I want is a slowly animation of dropping down like I've shown in the mainpost. Is that even possible at all? – NielsDePils Feb 12 '15 at 19:15

score 0 · Answer 3 · answered Feb 12 '15 at 18:17

0

You could use opacity, and set it to 0 or 1:

this.prevPost.style.display = "block";
this.prevPost.style.opacity = 1;

answered Feb 12 '15 at 18:17

Bouke Versteegh

4,097
1
39
35

Is it possible to use transitions with display none to display block

3 Answers3