Question

我正在创建一个类，我必须使用querySelector而不是getElementsByClassName或getElementById，但是我使事物消失的方式（将不透明度设置为0并且将显示设置为无的转换）不能正常工作。没有制作动画。这是我的代码

makeReappear: function(animated = false, trigger = null, target = null)
    {
        var triggerProvided = false;
        var targetProvided = false;
        if (trigger != null && target != null && triggerProvided === false && targetProvided === false)
        {
            triggerProvided = true;
            targetProvided = true;
            if (triggerProvided && targetProvided)
            {
                var isAnimated = false;
                if (animated === false)
                {
                    if (document.querySelector(target).style.display === "none")
                    {
                        document.querySelector(target).style.display = "block";
                    }
                    else 
                    {
                        console.log("Cannot set display propery.");
                    }
                }
                else if (animated === true && isAnimated === false)
                {
                    isAnimated = true;
                    if (isAnimated)
                    {
                        if (document.querySelector(target).style.display === "none")
                        {
                            document.querySelector(target).style.transition = "all 2s";
                            setTimeout(function() {
                                document.querySelector(target).style.opacity = 100;
                            }, 1000);
                            setTimeout(function() {
                                document.querySelector(target).style.display = "block";
                            }, 2000);
                        }
                    }
                    else 
                    {
                        console.log("Could not determine if animated was set to true");
                    }
                }
            }
            else 
            {
                console.log("Invalid target");
            }
        }
        else 
        {
            console.log("No elements selected");
        }
    }

这是班级的一小部分。我遇到困难的功能。它不会使用我设置的2秒动画将不透明度设置为100。为什么是这样？然而，当我让它消失时它工作正常。

Answer 1

由于您在设置不透明度后切换显示，因此动画无法正常工作。

如果在设置转换的同时将显示设置为阻止，然后在超时中修改不透明度，则应该可以正常工作。

document.querySelector(target).style.transition = "all 2s";
document.querySelector(target).style.display = "block";
setTimeout(function() {
  document.querySelector(target).style.opacity = 1;
}, 1000);

假设你已经将它的不透明度设置为0之前

Javascript：可以使用querySelector

1 个答案: