CODEWITHSUNDEEP
javascriptcsscss-transitions
user1520481
user1520481

Reputation: 121

How to set and trigger an css transition from JavaScript

I'm new to html5, css and javascript, And mostly I've just been playing around. What I want to do is to set and trigger a transition of a div. After the page is loaded, I manage to do that by setting a transition. But that doesn't feel very dynamic and doesn't seem the right way to go. I am thankful for any help

<!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>

Upvotes: 12

Views: 24808

Answers (4)

Friedrich -- Слава Україні
Friedrich -- Слава Україні

Reputation: 3734

Here is a little demo

<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>

Upvotes: 1

net.uk.sweet
net.uk.sweet

Reputation: 12431

You can add your class to the element whenever you want to using the following JavaScript: 

document.getElementById("dialPointer").className += " didLoad";

Or arguably better, if you want to guarantee cross-browser support, using jQuery like this: 

$(function() {
 // Handler for .ready() called.
 $('#dialPointer').addClass('didLoad');
});

Edit:

See fiddle here which I've tested in Chrome and Safari on Windows. I had to comment out the transition code in the dialPointer style and move it to your didLoad class. I also replaced your background image with a fill to get it to work in the fiddle.

Upvotes: 6

Nathan
Nathan

Reputation: 11149

The way you trigger transitions is to make an element match the CSS selector. The easiest way to do that is to assign your transition to a class, then add that class using Javascript. So in your example:

document.getElementById('dialPointer').classList.add('didLoad');

and your chosen element will animate. (I've used standards compliment Javascript for this, but it won't work on older browsers, so I'll leave it up to you to get that working).

To get it to animate on page load, put it in a load event:

window.addEventListener('load', function () {
    document.getElementById('dialPointer').classList.add('didLoad');
});

Upvotes: 11

Billy Moat
Billy Moat

Reputation: 21050

Maybe something like this:

document.getElementById("dialPointer").className += "didLoad";

Upvotes: 0

Related Questions