Как сделать так, чтобы переход непрозрачности начинался с его текущего состояния, даже если на него в данный момент влияет переход? - PullRequest
Новая
       22

Как сделать так, чтобы переход непрозрачности начинался с его текущего состояния, даже если на него в данный момент влияет переход?

0 голосов
/ 08 февраля 2019

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

Я получил это для работы, используя переходы для исчезновения старогоизображение (изображение х) и исчезать в новом изображении (изображение у) в течение 3 секунд.Однако, если я спамлю следующую / предыдущую кнопку, новое изображение (изображение y, которое постепенно исчезает) сразу же исчезнет с любой непрозрачности, равной 100%.

Поэтому мой вопрос заключается в том, как мнеостановить новое изображение (изображение y), подпрыгнув до непрозрачности 100%, и вместо этого просто исчезнуть из его текущей непрозрачности, когда «новое новое» изображение (изображение z) исчезнет?

Вот мой CSS: 

.mySlides{
    opacity: 0;
    transition: opacity 3s ease-in;
}


.fade {
    opacity: 1;
}

Тогда у меня просто есть JS, чтобы добавить или удалить класс .fade к элементу .mySlides, чтобы он исчезал или исчезал: 

slides[new_slideIndex].classList.add("fade");
slides[current_slideIndex].classList.remove("fade");

Заранее благодарен за любую помощь!

1 Ответ

0 голосов
/ 08 февраля 2019

Из кода я предполагаю, что вы удаляете класс fade изображения y до его фактического перехода, что вызывает ошибку.

Вы можете setTimeout(function() {slides[current_slideIndex].classList.remove("fade")} , 3000) убедиться, что он удален после 3секунд (завершение перехода), но я не уверен, какими будут результаты, и не могу его опробовать, поскольку у меня нет всего необходимого кода - хотя я считаю, что он может работать

Другим способом было бы предотвратитьспам, добавив свойство pointer-events:none к следующей кнопке при нажатии и удалив его с setTimeout 3 секундами позже, чтобы следующую кнопку можно было нажимать только один раз каждые 3 секунды?

...