Продолжительность перехода Javascript не будет работать

-1

Я не хочу делать методы show() и hide(), подобные jquery, но с чистым javascript, потому что я хочу изменить способ отображения и скрыть элемент. Но после моих попыток я изменил место размещения кода, изменил код и т. Д., Но он не будет работать. Только несколько раз это была работа, но она была непоследовательной (когда я пытаюсь запустить ее через firefox, она работает один раз, но никогда больше). Дисплей (блок и нет), а также точная ширина и высота работы, но не переход 2s. Как это исправить?Продолжительность перехода Javascript не будет работать

<!doctype html> 
<html> 

<head> 
<style> 
    div { 
     width: 0px; 
     height: 0px; 
     background-color: yellow; 
     border: 1px solid black; 
     display: none; 
    } 
</style> 
</head> 

<body> 

<div> 
</div> 

<button> 
    click ! 
</button> 

<script> 
    var x = document.getElementsByTagName("button"); 
    var y = document.getElementsByTagName("div"); 

    x[0].onclick = fungsi; 

    function fungsi() { 
     if (y[0].style.display != "block") { 
      y[0].style.display = "block"; 
      y[0].style.transition = "width 2s"; 
      y[0].style.transition = "height 2s"; 
      y[0].style.width = "100px"; 
      y[0].style.height = "100px"; 
     } else { 
      y[0].style.display = ""; 
      y[0].style.transition = "width 2s"; 
      y[0].style.transition = "height 2s"; 
      y[0].style.width = ""; 
      y[0].style.height = ""; 
     } 
    }; 
</script> 
</body> 

</html>

источник

2015-10-04 Hudoyo Danumurti

Похоже, вы переписываете высоту в ширину. Работает ли ширина? –

Нет .. Я попытался поместить «y [0] .style.transition» вне функции if, но все же внутри «fungsi()», конечно, вот когда он работает на firefox, но только на этот раз. –

Я запутался с вашим кодом и обнаружил, что причиной вашей проблемы было переключение с display: none; на display: block; и обратно. Я сделал простое решение для этого, если вы хотите его использовать.

Вот модифицированный код CSS.

div { 
    width: 0px; 
    height: 0px; 
    background-color: yellow; 
    border: none; 
}

Это модифицированный код JS.

var x = document.getElementsByTagName("button"); 
var y = document.getElementsByTagName("div"); 
x[0].onclick = fungsi; 
var expanded = false; 

function fungsi() { 
    y[0].style.transition = "all 2s"; 
    if (!expanded) { 
     y[0].style.border = "1px solid black"; 
     y[0].style.width = "100px"; 
     y[0].style.height = "100px"; 
     expanded = true; 
    } else { 
     var applyBorder = function() { 
      y[0].style.border = "none"; 
     }; 
     y[0].style.width = "0"; 
     y[0].style.height = "0"; 
     expanded = false; 
     setTimeout(applyBorder, 2000); 
    } 
};

И here является JSFiddle этого кода для примера.

источник

2015-10-04 01:59:26

Спасибо! оно прекрасно! : D –

Это может быть что-то делать с префиксы

Так как имеющее следующие:

y[0].style.transition

Вам также потребуется:

y[0].style.mozTransition 
y[0].style.webkitTransition

Попробуйте сделать это, надеюсь, должен работать.

источник

2015-10-04 01:49:40

все еще не работает. Работает ли он на вашем браузере? –

Что вы делаете, это не анимация шоу и скрытие с «чистым javascript», это действительно анимация шоу и скрытие с CSS3. Вы просто устанавливаете свойства CSS через javascript!

Это, как говорится, переходы CSS3: не поддерживается каждым браузером. Например, даже IE9 не поддерживает его. Некоторые другие браузеры работают только с префиксами этого свойства.

Попробуйте установить -moz-transition, -webkit-transition и -o-transition тоже.

Для получения более подробной информации см: Transition browser support

Однако, если вы ожидаете, что ваш анимации для работы на всех основных платформах, я предлагаю вам использовать JQuery и попробуйте отрегулировать настройки в желаемое поведение ..

источник

2015-10-04 01:59:05

При запуске

y[0].style.transition = "width 2s"; 
y[0].style.transition = "height 2s";

Первая строка будет заменена второй. Таким образом, переход идет только по ширине или высоте за раз, а когда один из них равен 0, переход будет невидим.

Вы должны установить переход так:

y[0].style.transition = 'width 2s,height 2s';

Или просто установить его для all свойств, которые поддерживают переход:

y[0].style.transition = 'all 2s';

BTW, так как свойство перехода не меняется, вы должны установить их вне меняющейся части.

Другая проблема заключается в том, что <div> должен быть виден до начала анимации, иначе он будет иметь требуемую ширину и высоту, как только станет видимым, и переход не понадобится больше. visibility - еще один выбор, поскольку элемент с visibility: hidden по-прежнему занимает место.

Вот рабочая копия кода:

<!doctype html> 
<html> 

<head> 
<style> 
    div { 
     width: 0px; 
     height: 0px; 
     background-color: yellow; 
     border: 1px solid black; 
     /* Use visibility instead of display */ 
     visibility: hidden; 
    } 
</style> 
</head> 
<body> 

<div> 
</div> 

<button> 
    click ! 
</button> 

<script> 
    var x = document.getElementsByTagName("button"); 
    var y = document.getElementsByTagName("div"); 

    x[0].onclick = fungsi; 
    // set transition 
    y[0].style.transition = "width 2s,height 2s"; 

    function fungsi() { 
     if (y[0].style.visibility != "visible") { 
      y[0].style.visibility = "visible"; 
      y[0].style.width = "100px"; 
      y[0].style.height = "100px"; 
     } else { 
      y[0].style.visibility = ""; 
      y[0].style.width = ""; 
      y[0].style.height = ""; 
     } 
    }; 
</script> 
</body> 

</html>

И что-то еще, если вы хотите, чтобы скрыть элемент после завершения анимации, setTimeout будет работать.

источник

2015-10-04 02:10:23 Gerald

Я тоже пробовал «все 2s», это не работа. О видимости, ну, я попробую ваш код. Спасибо! –

Продолжительность перехода Javascript не будет работать

ответ

Смежные вопросы