當添加或刪除類時，CSS和/或Javascript轉換爲div移動

-2

尋找一些關於我的項目可能實現的想法。當添加或刪除類時，CSS和/或Javascript轉換爲div移動

我有一個容器div，我動態加載內容。如果我想要內容居中，我有放在容器div（.center-content）和包含的div（#container .center-content）上的類。如果我不想讓它們居中，則使用removeClass（）移除類。那裏沒問題。

以下是我需要幫助的內容：當我刪除了以中心爲單位的類時，divs當然會突然移動到新的位置。我希望他們能夠在所有類似性感的方面更加sa sa。

是否有一個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"); 
});

來源

2013-12-09 Joel

您可以使用jQuery過渡類，但是您的問題在編寫時不適用於SO。 – isherwood

-isherwood，我可以添加哪些信息來改善問題？ -codehorse，真的我只是在尋找一種方法來緩和現在對用戶有點刺激的轉換。 – Joel

SO問題通常需要編碼。你的問題太廣泛了。 – isherwood

當你知道確切的寬度和位置，你可以申請一個CSS transition上margin

#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

來源

2013-12-09 22:17:59

謝謝奧拉夫。讓我看看我是否可以應用這種技術。通常我不會有這樣的保證金，但也許我可以做類似的事情。 – Joel

說這樣做的動畫你必須從一個已知的和從左邊距開始說是正確的嗎？ – Joel

是的，至少，這是我從[動畫屬性列表]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties#animatable-margin）中讀取的內容。看起來，你可以忽略'margin-left：0'。雖然，當你用'auto'替換'150px'時，它不會做動畫，而是跳到目標位置。 –

當添加或刪除類時，CSS和/或Javascript轉換爲div移動

回答

相關問題