[js] transitionend

transitionend 이벤트는 css 트랜지션(transition) 애니메이션이 완료되었을 때 발생한다. 이 이벤트는 특정 요소의 트랜지션이 끝난 후에 실행할 작업을 지정하는 데 사용된다. 이를 통해 애니메이션이 완료된 시점을 정확히 감지할 수 있다. 

 

$("#collapse-sidebar").on("click", function () {
    var sidebarMenu = $("#sidebar-menu");
    sidebarMenu.toggleClass("collapsed");

    if (sidebarMenu.hasClass("collapsed")) {
        // 사이드바가 접힐 때 아이템의 visible 상태를 hidden으로 설정
        sidebarMenu.find(".nav-link").each(function () {
            $(this).css("visibility", "hidden");
        });
        $("#main-content").addClass("collapsed");
    } else {
        // 사이드바가 다시 열릴 때 transitionend 이벤트를 사용하여 visibility를 변경
        sidebarMenu.one("transitionend", function () {
            sidebarMenu.find(".nav-link").each(function () {
                $(this).css("visibility", "visible");
            });
        });
        $("#main-content").removeClass("collapsed");
    }
});

 

 

결과