簡體   English   中英

如何設置和觸發 JavaScript 的 css 轉換

[英]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 屬性值來觸發轉換應該簡單得多。 但是,是的……您需要滿足以下條件;

  1. 為了使您的<div id="blue"></div>元素具有動畫效果,它必須攜帶定義了transition和相關屬性的std類(以下示例中為opacity )。 所以首先我們應該像blue.classList.add("std");
  2. 您需要異步執行任務。 異步刷新 DOM 最好由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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM