[英]How to set and trigger an css transition from JavaScript
我是 html5、css 和 javascript 的新手,大部分時間我只是在玩。 我想要做的是設置並觸發一個 div 的轉換。 頁面加載后,我設法通過設置過渡來做到這一點。 但這感覺不是很有活力,而且似乎不是通往 go 的正確方式。我感謝您的幫助
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
#dialPointer
{
position:relative;
margin-left: auto;
margin-right: auto;
width:23px;
height:281px;
background:url(pointer.png);
background-size:100% 100%;
background-repeat:no-repeat;
transform: rotate(-150deg);
transition-duration: 2s;
transition-delay: 2s;
-webkit-transform: rotate(-150deg);
-webkit-transition-duration:2s;
-webkit-transition-delay: 2s;
}
/* I want to call this once */
.didLoad
{
width:23px;
height:281px;
transform:rotate(110deg);
-moz-transform:rotate(110deg); /* Firefox 4 */
-webkit-transform:rotate(110deg); /* Safari and Chrome */
-o-transform:rotate(110deg); /* Opera */
}
</style>
</head>
<body>
<div id="dialPointer"></div>
<script language="javascript" type="text/javascript">
window.onload=function () {
//But instead of using rotate(110deg), I would like to call "didLoad"
document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)";
};
</script>
</body>
</html>
只要您想使用以下JavaScript,就可以將類添加到元素中:
document.getElementById("dialPointer").className += " didLoad";
或者可以說更好,如果你想保證跨瀏覽器支持,使用這樣的jQuery:
$(function() {
// Handler for .ready() called.
$('#dialPointer').addClass('didLoad');
});
編輯:
請參閱此處的小提琴 ,我在Windows上的Chrome和Safari中進行了測試。 我必須在dialPointer
樣式中注釋轉換代碼並將其移動到didLoad
類。 我還用填充替換了你的背景圖像,讓它在小提琴中起作用。
觸發轉換的方式是使元素與CSS選擇器匹配。 最簡單的方法是將轉換分配給類,然后使用Javascript添加該類。 所以在你的例子中:
document.getElementById('dialPointer').classList.add('didLoad');
並且您選擇的元素將具有動畫效果。 (我已經使用了標准來補充Javascript,但是它不適用於舊瀏覽器,所以我會讓你完成這項工作)。
要使其在頁面加載時設置動畫,請將其置於加載事件中:
window.addEventListener('load', function () {
document.getElementById('dialPointer').classList.add('didLoad');
});
也許是這樣的:
document.getElementById("dialPointer").className += "didLoad";
要觸發轉換,您實際上並不需要一個類來切換。 這很重要,因為您可能不喜歡為每個要預先切換的下一個動畫動態設置類。 換句話說,僅僅改變相關的 CSS 屬性值來觸發轉換應該簡單得多。 但是,是的……您需要滿足以下條件;
<div id="blue"></div>
元素具有動畫效果,它必須攜帶定義了transition
和相關屬性的std
類(以下示例中為opacity
)。 所以首先我們應該像blue.classList.add("std");
requestAnimationFrame()
函數完成。 var blue = document.getElementById("blue"); blue.classList.add("std"); blue.style.backgroundColor = "blue"; blue.style.opacity = 0; document.querySelector('button') .addEventListener( 'click' , _ => requestAnimationFrame(_ => blue.style.opacity = 1) );
.std { width:100px; height:100px; opacity: 1; transition: opacity 5s; } .std--red { background-color: red;}
<button>click here</button> <div class='std std--red'></div> <div id="blue"></div>
這是一個小演示
<style> div { background-color: red; transition: all 1000ms linear; }.didLoad { background-color: gold; transition: all 1000ms linear; } </style> <div onclick="this.classList.toggle('didLoad');">click to animate background-color</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.