无法实现Javascript动画逻辑

Question

我想在我的Javascript动画中实现一些逻辑，但无论我在哪里尝试实现它，它都无法运行。我想在动画完成时让navigationOpen为真。但是当我在renderSlideOutAnimation()中设置if语句在renderSlideOutAnimation函数之前运行时，会发生什么。

function openSlideNavigation() {

    var navigationSlideOut = document.getElementById("navigation-slide"); 
    var naviationTrigger = document.getElementById('menu-dots');
    var navigationOpen = true;

    function renderSlideOutAnimation() {

        var widthValue = 0;
        var interval = setInterval(frame, 17.5);

        function frame() {
            if (widthValue == 100) {
                clearInterval(interval);
            } else {
                widthValue++
                navigationSlideOut.style.width = widthValue + "vw"
            }
        }
    }

    if (navigationOpen == true){
        renderSlideOutAnimation();
    }
}