簡單的CSS3轉換

我無法轉換到使用此代碼的工作簡單的CSS3轉換

更改從左到右的文本對齊。非常簡單的代碼。

<style> 
/* Default State */ 
div { 
    background: green; 
    width: 1000px; 
    height: 100px; 
    line-height: 100px; 
    color: white; 
    text-align: left; 
transition: all 10s; 
-webkit-transition: all 10s; 

} 

/* Toggled State */ 
input[type=checkbox]:checked ~ div { 
    text-align: right; 

} 
</style> 

<label for="toggle-1">Do Something</label> 
<input type="checkbox" id="toggle-1"> 
<div>Control me</div>

而且如果我需要顯示沒有阻止

來源

2014-02-13 Yamona

請看這裏 - > http://stackoverflow.com/questions/18235764/is-it-possible-to-transition-text-alignment-using-css3-only –

text-align屬性不能在CSS中動畫，如您可以看到here。雖然這不能簡單的CSS動畫效果，你可以使用jQuery library，正如我在下面的例子做：

$("input[type=checkbox]").click(function (e) { 
    if ($(this).prop("checked")) { 
     var spanItem = document.getElementsByTagName("span").item(0).clientWidth; 

     alert(spanItem); 
     $("span").animate({ 
      width: $(this).textWidth() 
     }, 500); 
    } 
});

上面的代碼是從我寫了一首歌this JSFiddle樣本。

來源

2014-02-13 19:32:15 Victor