動畫或變換方法？

我想點擊一個按鈕後，移動DIV如果我寫這個CSS：動畫或變換方法？

div.box { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    -ms-transform: translate(50px, 100px); /* IE 9 */ 
    -webkit-transform: translate(50px, 100px); /* Safari */ 
    transform: translate(50px, 100px); /* Standard syntax */ 
}

那麼問題是，當我打開網頁我沒有看到div的運動，所以我不得不使用動畫，如果我使用動畫的問題是，div會自動開始移動。我的問題是我應該使用什麼？動畫還是變形？我怎麼能夠？

來源

2015-12-22 Owlay

如何在頁面加載時保持div的狀態？ – DigitalDouble

當我打開頁面時div的狀態已被更改，但我沒有看到運動（如動畫）sry我的英文不好 – Owlay

你可以使用jquery。

CSS：

div.box { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    transition-duration=2s; //or any duration else 
}

的jQuery：

$("button").click(function() { 
    $(".box").css({ 
    "transform": "translate(50px,100px)", 
    "-webkit-transform": "translate(50px,100px)", 
    "-ms-transform": "translate(50px,100px)" 
    }); 
});

JSFiddle link

來源

2015-12-22 04:01:39

您的編輯沒有爲您的文章添加任何值。爲什麼再次編輯？ – Alex

你可以只用CSS3做吧！選中此fiddle：

創建<label>和<input>元素：

<label class="label-btn" for="clickme">Click me!</label> 
<input type="checkbox" id="clickme" />  
<div class="box"></div>

然後，應用這個小動作CSS的複選框，然後風格你的標籤，就好像它是一個按鈕：

#clickme { 
    display: none; 
} 

#clickme:checked + div.box { 
    -ms-transform: translate(50px,100px); /* IE 9 */ 
    -webkit-transform: translate(50px,100px); /* Safari */ 
    transform: translate(50px,100px); /* Standard syntax */ 
} 

.label-btn { 
    cursor: pointer; 
    padding: 10px; 
    background: pink; 
    display:inline-block; 
}

此外，添加轉換屬性到您的div.box，以便轉換可以平穩運行（如果需要，更改轉換時間）：

div.box { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    transition: 1s all; 
}

希望它有幫助！

來源

2015-12-22 04:21:50

是的它幫助。它非常棒，你沒有使用Java或jQuery。好主意 – Owlay

動畫或變換方法？

回答

相關問題