Question

我有两个div，当用户点击30px时，button向上移动{另一个移动30px。我通过在两个css类up和down之间进行交换来实现这一目标。问题是，即使我将transition: all 1s ease;添加到相应的css类，我也无法向类交换添加动画。如何在两者之间切换，以便div s可以很好地上下滑动？ JSFIDDLE

HTML：

<div class="row centered plan-container">
    <div class="col-sm-4 col-md-4 plan-col">
        <div class="smallBox">
             <h3>DEMO 1</h3>

        </div>
        <div class="bigBox">
            <button>SELECT</button>
        </div>
    </div>
    <div class="col-sm-4 col-md-4 plan-col">
        <div class="smallBox">
             <h3>DEMO 2</h3>

        </div>
        <div class="bigBox">
            <button>SELECT</button>
        </div>
    </div>
</div>

JQUERY：

$(".bigBox button").click(function () {
    var buttonsArray = $(".bigBox button");
    for (var i = 0; i < buttonsArray.length; i++) {
        $(buttonsArray[i]).css("background-color", "#1c1d20");
    }
    var parent = $(this).parent().parent();

    $(this).css("background-color", "#2eb5aa");


    var parents = $(".plan-col");
    for (var i = 0; i < parents.length; i++) {
        $(parents[i]).removeClass("up").addClass("down");
    }


    $(parent).addClass("up");
});

CSS：

.plan-container {
    text-align: center;
    max-width: 1000px;
    position:relative;
    margin: 0 auto;
    top: 50px;
}

.smallBox {
    height: 150px;
    border: 1px solid #2e2f3c;
}
.bigBox {
    height: 400px;
    border: 1px solid #2e2f3c;
}

.bigBox button {
    position: relative;
    top: 50px;
    padding: 10px 55px;
    border-radius: 50px;
    border: 3px solid #2eb5aa;
    background-color: #1c1d20;
    color: white;
    outline:0;
}
.up {
    bottom:30px;
}
.down {
    up:30px;
}
.col-plan {
    -webkit-transition: all 1s ease;
}

Answer 1

我对你的代码进行了一些修改，因为我有点修改，我很害怕。但它有效！

AFAIK，CSS3过渡只发生在一个事件上，所以你不能真正做你想做的事情（从.col-plan的另一个元素动画<button>的样式。所以这使用jQuery来制作动画，哪种偏离了你原来使用CSS过渡的意图。对不起=（。

这是我改变的内容：

jQuery 。请注意，我使用jQuery＆＃39; s animate()而不是更改类。然而，CSS转换确实处理了时间，因此您不必以ms为单位输入长度。我还为jQuery for函数关闭了each()循环并删除了额外的$( ... )。

   $(".bigBox button").click(function () {
    var buttonsArray = $(".bigBox button");
    for (var i = 0; i < buttonsArray.length; i++) {
        $(buttonsArray[i]).css("background-color", "#1c1d20");
    }
    var parent = $(this).parent().parent();
    $(this).css("background-color", "#2eb5aa");

    var parents = $(".col-plan");
    parents.each(function() {
        $(this).animate({"top": "0"});
    });

    parent.animate({"top": "auto", "bottom": "30px"});
});

CSS ：
- .plan-col应为.col-plan。您的代码中没有.plan-col类。
- 我删除了.up和.down类，因为它们只是一种样式，你可以用jQuery做到这一点。另外，与上述评论一样，up应为top。

请参阅JSFiddle.net上的working example。

Answer 2

经过一次良好的睡眠后，我找到了正在寻找的正确解决方案。对于那些感兴趣的人，这里是处理动画的js代码：

var parents = $(".selected");
for(var i=0;i<parents.length;i++){
    $(parents[i]).animate({
    'marginTop' : "+0px" //moves down
    },{queue: false});
    $(parents[i]).removeClass("selected");
}

var parent = $(this).parent().parent();
$(parent).addClass("selected");

$(parent).animate({
    'marginTop' : "-30px" //moves up
    },{queue: false});

功能齐全的示例here。

jQuery - 在CSS类交换期间无法应用CSS动画

2 个答案: