как скрыть элемент в конце анимации javascript

71
7

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

function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);

function frame() {
if (pos == 380) {
clearInterval(id);

} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';

}
}

}

спросил(а) 2017-02-26T06:54:00+03:00 3 года, 8 месяцев назад
1
Решение
121

Чтобы скрыть элемент, просто установите style.display в "none".

Например:

function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);

function frame() {
if (pos == 380) {
clearInterval(id);
// this is the key line
elem.style.display = 'none';

} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';

}
}

Точно так же, как хэдз-ап, использование прикованных setTimeouts может быть лучше, чем использование setInterval в анимации HTML. Причина состоит в том, что если анимация (и/или другие скрипты на странице) занимает больше времени, чем браузер, он перестанет отвечать на запросы. С цепочкой setTimeouts часы не начинают тикать до конца текущего кадра.

Например, вы можете:

function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;

function frame() {
if (pos == 380) {
// this is the key line
elem.style.display = 'none';

} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
// set a timeout for 5 ms
setTimeout(myMove, 5);
}
}

ответил(а) 2017-02-26T07:56:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема