Непрозрачность Стиль не работает при обратном вызове Java Сценарий? - PullRequest
Новая
       19

Непрозрачность Стиль не работает при обратном вызове Java Сценарий?

1 голос
/ 06 апреля 2020

l oop работает нормально после обратного вызова назначенной функции EventListener fade (), но консоль показывает мне, что прозрачность не изменяется при изменении значения. Что я делаю не так? 

function fade(element) {

    var easeIn = 0.01;
    var easeOut = 0.01;

    for (alpha = 1; alpha >= 0.2 ; alpha -= easeIn){
        element.target.style.opacity = String(alpha);
        console.log(alpha, element.target);
    }

    for (alpha = 0.2; alpha <= 1 ; alpha += easeOut){
        element.target.style.opacity = alpha;
        console.log(alpha, element.target);
    }    
}

1 Ответ

1 голос
/ 06 апреля 2020

Ваш l oop работает синхронно, и браузер пакетирует стиль меняется - дисплей обновится только после того, как все Javascript завершено, и к этому времени непрозрачность вернется к 1, так что визуально изменений не будет.

Вместо этого добавьте небольшую задержку внутри циклов: 

const delay = ms => new Promise(res => setTimeout(res, ms));
async function fade(element) {

    var easeIn = 0.01;
    var easeOut = 0.01;

    for (alpha = 1; alpha >= 0.2 ; alpha -= easeIn){
        element.style.opacity = String(alpha);
        await delay(20);
    }

    for (alpha = 0.2; alpha <= 1 ; alpha += easeOut){
        element.style.opacity = alpha;
        await delay(20);
    }    
}

const elm = document.querySelector('button');
elm.addEventListener('click', () => {
  fade(elm);
});
<button>click</button>

(обратите внимание, что переменная с именем element должна, вероятно, на самом деле быть элементом , в противном случае вы вполне можете вызвать путаницу у тех, кто читает код, включая вас позже)

Для нескольких кнопок обязательно объявите переменную alpha, иначе она будет неявно глобальной и общей для всех слушателей: 

const delay = ms => new Promise(res => setTimeout(res, ms));
async function fade(element) {
    var easeIn = 0.01;
    var easeOut = 0.01;

    for (let alpha = 1; alpha >= 0.2 ; alpha -= easeIn){
        element.style.opacity = String(alpha);
        await delay(20);
    }

    for (let alpha = 0.2; alpha <= 1 ; alpha += easeOut){
        element.style.opacity = alpha;
        await delay(20);
    }    
}

for (const elm of document.querySelectorAll('button')) {
  elm.addEventListener('click', () => {
    fade(elm);
  });
}
<button>click</button>
<button>click</button>
...