Question

寻找关于我的项目可能性的一些想法。

我有一个容器div，我动态加载内容。如果我希望内容居中，我会在容器div（.center-content）和包含的div（#container .center-content）上放置类。如果我不希望它们居中，我使用removeClass（）删除类。没问题。

这就是我需要帮助的地方：当我删除.centered类时，div当然会突然移动到新的位置。我希望他们在所有性感的东西上更加闲逛。

我是否可以应用css过渡策略，如果添加或删除的某个类导致div重新定位，我可以为其动画设置动画（即慢或快）？

我之前使用过明确的css动画作为效果，但这看起来有点不同，我不知道什么是可能的，什么是不可能的。

谢谢，

乔尔
这是一个jsfiddle作为例子。 http://jsfiddle.net/zdbbf/1/

我希望在移除定心时过渡更平滑。

HTML：

<div id="mycontainer" class='centered'>
    <div id="mycontent" class='centered'>
        <span>I'm a centered div</span>
    </div>
    <button id="mybutton">click to remove centering</button>
</div>

CSS：

#mycontainer {
    height: 400px;
    width: 400px;
     border: 1px solid grey;
    background-color: grey;
}

#mycontent {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    text-align: left;
}

.centered {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#container .centered {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

JS：

$("#mybutton").on("click",function() {
    $("#mycontent").removeClass("centered");
});

Answer 1

当您知道确切的宽度和位置时，可以在margin上应用CSS transition

#mycontent {
    -webkit-transition: margin 2s;
    -ms-transition: margin 2s;
    -moz-transition: margin 2s;
    transition: margin 2s;
    margin-left: 0;
}
#mycontent.centered {
    margin: 0 150px;
}

JSFiddle

添加或删除类时，CSS移动的CSS和/或Javascript转换

1 个答案: