是否可以保持使用CSS轉換進行的更改？

Question

當我做丟棄

#box { 
    height: 150px; 
    width: 150px; 
    background-color: #cc66ff; 
} 

#box:active { 
    width: 300px; height: 300px; 
    -webkit-transition: width 1s linear, height 1s linear; 
     -moz-transition: width 1s linear, height 1s linear; 
     -ms-transition: width 1s linear, height 1s linear; 
     -o-transition: width 1s linear, height 1s linear; 
      transition: width 1s linear, height 1s linear; 
} 

的變化，一旦我鬆開鼠標按鈕，有沒有辦法讓他們留下來？擴展盒子並使用CSS或/和JS保持原樣？

Answer 1

可以使用jQuery animate function：

$("#box").click(function() { 
    $(this).animate({ width: "300px", height: "300px" }, { queue: false, duration: 3000 }) 
}); 

或可選擇地有您的轉換爲CSS類的結果，而不是:active psuedoselector：

#box.active { 
    width: 300px; height: 300px; 
    -webkit-transition: width 1s linear, height 1s linear; 
    -moz-transition: width 1s linear, height 1s linear; 
    -ms-transition: width 1s linear, height 1s linear; 
    -o-transition: width 1s linear, height 1s linear; 
    transition: width 1s linear, height 1s linear; 
} 

$("#box").click(function() { 
    $(this).addClass('active'); 
}); 

Answer 2

，唯一的辦法是動畫它，因爲你正在從一個尺寸改變到另一個尺寸，而你的定義只是針對'活躍'狀態。

恐怕你不能擺脫在這一個使用JavaScript。

Answer 3

CSS：

#box.expanded{ 
width: 300px; height: 300px; 
} 

jquery的（JS）：

$('#box').mouseup(function() { $(this).addClass('expanded'); });