我想要向左移動這個div
,就像動畫一樣平滑,然後我希望它通過動畫擴展到一個大小。我目前試圖嘗試的方式是使用類並在它們之間切換,單擊,它們的過渡屬性允許它進行動畫製作。讓它在擴展之前向左移動
基本上我正在努力讓元素移動,然後展開,它想要或者在同一時間做它們,或者當它重新點擊移動時展開。
我想單擊>移動>然後展開>然後重新單擊以將其全部撤消。 最好所有的JQuery
HTML:
<div class="box" id="box2">
<h1 class="headline">BOX</h1>
</div>
CSS:
.box_clicked {
height: 500px;
width: 500px;
background-color: rgba(0, 0 , 0, 0.8);
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.box {
height: 200px;
width: 300px;
background-color: rgba(0, 0 , 0, 0.8);
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.move-left {
right: -100px;
background-color:red;
}
這裏是我的jsfiddle
謝謝!
這是完美的,簡化了很多東西。謝謝你教我新東西! – Jiroscopes
''toggleClass()'中不需要添加持續時間。這是不必要的,因爲它不包含持續時間參數。 –
它爲我調整和移動。但是你說得很好,如果你設置了一個延遲,你可以通過轉換來完成。 '過渡:左1s,寬1s緩解1s;' – elvey