Используйте javascript .style с css переходов

Question

Я хочу иметь свой javascript element.style.visibility = 'visible';, и мне нужно, чтобы он исчезал с использованием перехода CSS, которое у меня есть. В настоящее время он не исчезает, это просто быстрый переход. NB: Мне нужно использовать JS, а не 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; 
} 

Спасибо :)

Answer 1

Я не верю, что видимость может быть анимирована, так как она принимает только 2 значения. Вы должны использовать непрозрачность.

Answer 2

Если ваша проблема просто выцветания и CSS преобразование не является крайне необходимо, может быть, вы d лучше использовать javascript-подход. Вы можете применить эффект затухания, используя «setTimeout» и «.style.opacity» свойство элемента DOM. Метод может работать следующим образом:

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

Да, css-переходы на самом деле легче, чем построенные js. Но для лучшего контроля за временем и применения эффекта по многим объектам, как вы хотите, js может быть очень удобным.

Answer 3

Вы можете решить эту проблему, добавив или удалив класс из объекта, а затем имея два набора переходов CSS - один для перехода и один для перехода. Они будут иметь как свойства непрозрачности, так и видимость, но разные значения задержки, и потенциально могут иметь разные длительности и методы ослабления.

Вот пример CSS. Я включил только CSS для перехода, а не какие-либо описательные свойства самого объекта.

/* 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; 
} 

В этом случае у нас есть объект с идентификатором «hiddenobject», который скрыт от вида. Он имеет как непрозрачность нуля, так и атрибут видимости скрыт. Мы добавим к нему класс «showobject», который вызовет отображение элемента, с непрозрачностью 1 и видимостью видимого.

Видимость может состоять только из двух состояний, она либо видимая, либо нет - между серыми областями нет. Поэтому, чтобы показать затухание, нам нужно использовать свойство непрозрачности. Трудность с непрозрачностью заключается в том, что на экране все еще присутствует что-то с непрозрачностью 0 - на него можно щелкнуть, взаимодействовать с ним и т. Д., Что может быть нежелательно. Решение состоит в том, чтобы использовать оба свойства вместе.

Когда мы добавляем класс 'showobject', мы переносим непрозрачность из текущего значения 0 в новое значение 1 с длительностью 500 мс или половиной секунды. Атрибут задержки этого перехода устанавливается в 0 секунд, поэтому это происходит немедленно. Видимость этого объекта была скрыта, поэтому, чтобы засвидетельствовать это затухание, нам нужно немедленно перевести свойство видимости в новое состояние видимости. Этот переход имеет как продолжительность, так и задержку 0 с, так что это происходит мгновенно - я поставил линейное ослабление, так как нет необходимости в каком-либо ослаблении, так что это может также упростить - это личное предпочтение. Итак, теперь наш объект виден в тот момент, когда мы добавляем класс, и мы видим, что он исчезает.

Когда мы удаляем класс, мы хотим, чтобы затухание происходило немного быстрее, поэтому наш переход по умолчанию для объекта имеет непрозрачность длительностью 200 мс, пятую часть секунды. Если бы мы сразу изменили видимость на скрытую, мы бы вообще не увидели исчезновение, оно просто исчезло бы. Поэтому мы должны задержать переход на значение, равное длине затухания - в этом случае 200 мс. Теперь наш объект завершается, он исчезает до 0 непрозрачности, прежде чем менять видимость на скрытую.

Переход видимости класса showobject в значительной степени связан с тем, что произойдет с этим свойством по умолчанию - мгновенное изменение - но нам нужно определить его там, чтобы перезаписать задержанный переход, который мы установили на элементе по умолчанию.