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

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