Menu
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>
900
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
You can't use the display property in CSS animations either.
CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS. Use JavaScript when you need significant control over your animations.
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');
});
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
