javascript - 将显示更改为显示时单个 Svg 不显示：无显示：块

Question

所以我有一个 SVG 动画，我已经做了很长一段时间了。我最近介绍了一个功能，在第一个场景进入框架后，用户可以单击 svg 图像，它将切换到两个场景中的另一个。

我遇到的问题专门与一个不会显示的场景有关。它是第二个或“夜”场景，在动画到时不会显示，但在它是第一个进入的场景时会可见。

在开发者控制台中，我可以看到这个场景被渲染到布局中——就像一个盒子模型正在被绘制一样，但是 svg 元素似乎是不可见的。我已将所有三个场景都配置为相同的行为方式，因此我不确定是什么导致这一场景行为不端。

我不熟悉 svg 特定的属性，所以如果有人能对代码示例中发生的事情有所了解，将不胜感激。

这是codepen的链接。该代码超出了 SO 允许的数量。

这是控制场景转换的 javascript 的快速参考：

//sets up animation scene
(function setup() {
    activeScene.style.display = "unset";
    //this is likly why tweenmax is taking a 360 rotation in the next code section - the rotation transformation is absolute, not relative
    TweenMax.set(document.getElementsByClassName("Scene-Svg"), {
        rotation: 180
    });
    console.log("scene is setup");
})();

(function comeIn() {
    //apparently tweenmax is not defined here
    TweenMax.to(activeScene, 3, {
        delay: 0.9,
        rotation: "360_CW",
        ease: Bounce.easeOut
    });
    console.log("animation entered");
})();

function nextScene() {
    /*
        what this function needs to do:
        -get active scene
        -get next scene
        -make next scene visible
        -rotate active and next scene
        -make active scene invisable
        -somehow change the global variable of activeScene to the next scene
    */
    let randIndex,
        nextScene;  
    let notActiveSceneIndex = false;
    while(notActiveSceneIndex === false){
        randIndex = Math.floor( Math.random() * scenes.length );
        if(  activeScene.id === undefined || scenes[randIndex].id === undefined ){
            throw new Error("an svg's id is set to undefined")   
        }
        else if(  activeScene.id === scenes[randIndex].id  ){
            continue                                 
        }else{
            console.log("randIndex :" + randIndex)
            nextScene = scenes[randIndex]
            notActiveSceneIndex = true;            
        }
    }
      
    nextScene.style.display = "block";
    TweenMax.to(nextScene, 1.5, { rotation: "360_CW",ease: Power1.easeOut });
    TweenMax.to(activeScene, 1.5, { rotation: "180_CCW", ease: Power1.easeOut, onComplete:onCompletion});
    
    var onCompletion = () => {
        activeScene.style.display = "none"
    }
    
    activeScene = nextScene   
    
    
    console.log("animation has left");
}

标签： javascriptcsssvg