Можно ли использовать переходы с дисплеем none для отображения блока

Question

Я все еще разрабатываю гениальный форум для своего сайта. Я хочу добавить некоторые причудливые эффекты javascript. На данный момент я не хочу использовать jQuery.

Моя проблема заключается в следующем: у меня есть элемент, который появляется, проверяя, является ли значение функции истинным или ложным. С этими проверками моя статья показывает или прячется.

Мой вопрос: возможно ли использовать переходы, чтобы мой блок опускался, как это делают переходы?

Первая функция js описывает проверку, а следующая функция скрывает или показывает мою статью, когда значения не пусты.

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"; 
    } 
} 

Когда мои пустые значения являются ложными, появляется статья, а если нет, она исчезает. Но когда это происходит, вы видите только шоу или скрыть, никакого дополнительного эффекта или чего-то еще.

Я хочу, чтобы это что-то вроде этого эффекта: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

значение Высота должна начинаться с 0 и заканчиваться высоте 150 или что-то в этом роде. Есть ли у кого-нибудь решение, как сделать это круто?

Заранее спасибо.

Answer 1

Нет, вы не можете, display определяется как неживой.

Если вы хотите обходные пути, см. CSS3 Animation and Display None.

Answer 2

Нет, display не входит в transition-property. Но вы можете попробовать opacity и за display:block, поместите его в свой div:hover или только div css.

Answer 3

Вы можете использовать opacity, и установить его на 0 или 1:

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