CSS 过渡在 jQuery 动画后不起作用？

Question

好的，所以我得到了三个泡泡形式的 div。现在我只是在做第一个。他们应该在点击时爆炸，占据几乎整个屏幕，然后在点击标题时回到原来的气泡。这是代码 - 如果你运行它，整个事情会更容易解释：

<!DOCTYPE html>
<html>
    <head>
        <title>KURB - Home</title>
        <link rel="stylesheet" type="text/css" href="kurb.css"/>
        <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="main">
            <p id="k">KURB</p>
        </div>
        <div id="about">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="work">
            <p class="label">Blah blah blah</p>
        </div>
        <div id="contact">
            <p class="label">Blah blah blah</p>
        </div>

        <script type="text/javascript">
            var main = $("#main");
            var about = $("#about");
            var work = $("#work");
            var contact = $("#contact");

            var open = false;

            about.click(function() {
                about.animate({
                    height: "100vh",
                    marginTop: "0vh",
                    width: "100%",
                    marginLeft: "0%",
                    borderRadius: "0",
                    opacity: "1"
                }, 300);

                main.animate({
                    marginTop: "1vh"
                }, 300);

                about.css("cursor", "auto");
                work.css("display", "none");
                contact.css("display", "none");
                main.css("cursor", "pointer");

                open=true;
            });

            main.click(function() {
                if (open = true) {
                    work.css("display", "inline");
                    contact.css("display", "inline");
                    main.css("cursor", "auto");

                    about.animate({
                        width: "38%",
                        marginLeft: "31%",
                        height: "30vh",
                        marginTop: "7vh",
                        borderRadius: "100%",
                        opacity: "0.6"
                    }, 300);

                    main.animate({
                        marginTop: "10vh"
                    }, 300);

                    about.css("cursor", "pointer");

                    open=false;
                }
            });
        </script>
    </body>
</html>

CSS:

body {
    overflow: hidden;
}

#main {
    float: left;
    width: 20%;
    height: 10vh;
    margin-top: 10vh;
    margin-left: 40%;
    text-align: center;
}

#k {
    font-family: Questrial;
    font-size: 70px;
    margin-top: -7px;
    margin-left: -2px;
    color: #404040;
    border-bottom: 2px solid #404040;
    line-height: 0.85;
}

#about {
    float: left;
    clear: both;
    width: 38%;
    height: 30vh;
    margin-top: 7vh;
    margin-left: 31%;
    text-align: center;
    background-color: #33CC33;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s, margin-bottom .5s;
    -webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s;
    cursor: pointer;
}

#about:hover {
    opacity: 0.8;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

#work {
    float: left;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-left: 10%;
    text-align: center;
    background-color: #323280;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s;
    -webkit-transition: opacity .5s, margin-top .5s;
    cursor: pointer;
}

#work:hover {
    opacity: 0.8;
    margin-top: -2vh;
}

#contact {
    float: right;
    width: 38%;
    height: 30vh;
    margin-top: 0vh;
    margin-right: 10%;
    text-align: center;
    background-color: #FF6600;
    border-radius: 100%;
    opacity: 0.6;
    transition: opacity .5s, margin-top .5s;
    -webkit-transition: opacity .5s, margin-top .5s;
    cursor: pointer;
}

#contact:hover {
    opacity: 0.8;
    margin-top: -2vh;
}

.label {
    font-family: Questrial;
    color: white;
    font-size: 35px;
    margin-top: 80px;
}

现在我已经能够做到这一切了。问题是，之后，应该改变不透明度的 CSS 过渡和 margin-top/margin-bottom 似乎不起作用。不透明度根本没有改变，div 也没有向上移动——底部的两个 div 向下移动。我不知道为什么，但我怀疑是因为我以某种方式搞砸了 jQuery 动画。我注意到当 div 全尺寸时， CSS 转换被停用。也许他们保持停用状态？ ...帮助？

Answer 1

试试这个：

transition: opacity .5s, margin-top .5s !important;

将 !important 关键字放在样式属性的末尾，它应该在您执行任何 jQuery 相关操作后起作用

我还建议您创建一个函数来执行两个点击事件之间的任何通用功能。添加一些参数（如要设置动画的元素和动画参数）并使用它们提供动画信息：

func animateElement(elementToAnimate, height, width //etc {

 elementToAnimate.animate({
                    height: height,
                    marginTop: "0vh",
                    width: width,
                    marginLeft: "0%",
                    borderRadius: "0",
                    opacity: "1"
                }, 300);

}

CSS 过渡在 jQuery 动画后不起作用？

CSS Transitions Not Working After jQuery Animation?

html

css

jquery

css-transitions