CSS 스타일의 자바 스크립트 이벤트가 블록에서 없음으로 변경

Question

내 div의 CSS 스타일을 블록에서 없음으로 변경하면 발생하는 순수 자바 스크립트 이벤트 (jQuery 없음)가 있습니다. 나는 "onBlur"를 통해 그것을 잡을 수는 있지만 인상 할 수없는 것처럼 보인다.

알려 주시기 바랍니다.

Answer 1

가시성 변경에 대해 트리거 된 DOM 이벤트가 없습니다.

할 수있는 최선의 방법은 항상 동일한 기능을 사용하여 매번 스타일을 변경하는 대신 블록의 가시성을 조정하는 것입니다.

올드 패턴 :

function doSomething() { 
    alert("I'm doing something!"); 
    myBlock.style.display = "block"; 
} 

function doSomethingElse() { 
    alert("I'm doing something else now!"); 
    myBlock.style.display = "none"; 
} 

새로운 패턴 :

function doSomething() { 
    alert("I'm doing something!"); 
    toggleMyBlock(true); 
} 

function doSomethingElse() { 
    alert("I'm doing something else now!"); 
    toggleMyBlock(false); 
} 

function toggleMyBlock(show) { 
    if (show) { 
     // code here for what would be your 'it became visible' event. 
    } else { 
     // code here for what would be your 'it became invisible' event. 
    } 
    myBlock.style.display = show ? "block" : "none"; 
} 

Answer 2

당신은 (최소한의 페이드 시간)을 CSS3 전환을위한 DOM의 이벤트를 수신 자바 스크립트를 사용할 수

:

• CSS3 transition events

Answer 3

나는 당신이 찾고있는 것과 가장 가까운 것이 DOMAttrModified event 일 것이라고 생각합니다. 나는 그것을 사용의에 완전히 확실하지 않다, 그러나의 라인을 따라입니다 :

element.addEventListener('DOMAttrModified', function (e) { 
    ... 
}); 

이벤트 핸들러가 display이 block 또는 none로 설정되어 있는지 여부를 확인하기 위해 당신에게 충분한 정보를 제공해야 MutationEvent받습니다.

내가 질문을 오해했을 수

편집 할 수 있습니다. CSS 변경으로 인해 DOMAttrModified 이벤트가 발생한다고 생각하지 않습니다. 처음에는 JavaScript로 display에 CSS 값을 설정한다는 의미의 질문을 읽었습니다. 내 대답이 도움이되지 않을 수도 있습니다.

Answer 4

향후 새로운 "교차점 옵저버 API"가 여러분이 찾고있는 것입니다. 현재 최신 Chrome, Firefox 및 Edge에서 작동합니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API을 참조하십시오. 디스플레이를 관찰

간단한 코드 예 : 유료 전환 :

// Start observing visbility of element. On change, the 
// the callback is called with Boolean visibility as 
// argument: 

respondToVisibility(element, callback) { 
    var options = { 
    root: document.documentElement 
    } 

    var observer = new IntersectionObserver((entries, observer) => { 
    entries.forEach(entry => { 
     callback(entry.intersectionRatio > 0); 
    }); 
    }, options); 

    observer.observe(element); 
} 

respondToVisibility(myElement, isVisible => { 
    if (isVisible) { 
    doSomething(); 
    } 
}); 

액션 : https://jsfiddle.net/elmarj/u35tez5n/5/