How to set and trigger an css transition from JavaScript

Question

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>

What are you trying to say with the you want to call class didLoad once ? do you want to implement it or transform it? in javascript you can not "call" a html class...? — gabeio
– gabeio, Commented Jul 12, 2012 at 11:40
Okey, so want I want to do is make my div with an background img, rotate after loading the page. But it seems strange that I have to declare the transition in the body. So I want trigger an already declared transition on my div. Also, I'm on safari browser. — user1520481
– user1520481, Commented Jul 12, 2012 at 12:24

Nathan · Accepted Answer · 2012-07-12 11:25:21Z

11

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');
});

answered Jul 12, 2012 at 11:25

Nathan

11.2k4 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1520481 Over a year ago

Thanks for the response, I tried replacing document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)"; with document.getElementById('dialPointer').classList.add('didLoad'); but then nothing happens, could be because I'm using safari?

user1520481 Over a year ago

I thought I had assigned a transition to the class didLoad. otherwise could you please show me how to do that?

net.uk.sweet · Accepted Answer · 2012-07-12 13:17:16Z

6

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.

edited Jul 12, 2012 at 13:17

answered Jul 12, 2012 at 11:16

net.uk.sweet

12.4k3 gold badges26 silver badges42 bronze badges

3 Comments

Nathan Over a year ago

You need a space at the start of the string when adding the class, or it won't work if there's another class already.

user1520481 Over a year ago

Ahha! nice! could it be then, that it can't transition, if the div is already rotated?

net.uk.sweet Over a year ago

Seems like you can rotate it to the point you want initially and then animate the rotation as long as the initial rotation is set in a class: jsfiddle.net/jvpmq

Friedrich -- Слава Україні · Accepted Answer · 2022-10-07 07:29:37Z

1

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>

edited Oct 7, 2022 at 7:29

answered Oct 7, 2022 at 7:23

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

3,9831 gold badge34 silver badges53 bronze badges

Comments

Billy Moat · Accepted Answer · 2012-07-12 11:16:23Z

0

Maybe something like this:

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

answered Jul 12, 2012 at 11:16

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

3 Comments

user1520481 Over a year ago

Thanks for the response! though nothing happens when I replace my row of code with your code. Any Idea's? I'm on safari web browser

net.uk.sweet Over a year ago

Check the debug console for errors. Have you added the line within your onLoad function?

user1520481 Over a year ago

no errors, I'm using safari's web inspector and error console. Yeah, I only replaced document.getElementById("dialPointer").style.webkitTransform = "rotate(110deg)"; with document.getElementById("dialPointer").className += "didLoad";

Collectives™ on Stack Overflow

How to set and trigger an css transition from JavaScript

4 Answers 4

2 Comments

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related