是否可以保持使用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'); });