We Keep Coding

Setting and element's opacity and then animating it - all with JS

I am working on a new site that is using page transitions. The old content fades away and the new content fades in - at least that's what should happen.
When the new content is loaded, I use JS to set it's opacity: 0
this.newContainer.style.opacity = 0;
Then, I add a new class so I can use CSS transitions
this.newContainer.classList.add("animate-in");
This is the CSS for the .animate-in
.wrapper.animate-in {
opacity: 1;
visibility: visible;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
However, this doesn't work. The code doesn't animate the opacity from 0 to 1. Instead, it is animating backwards, from 1 to 0. It seems like the classList.add doesn't hear the previous line of code.
Anyone know how to fix this?
EDIT
OK, so I learned that using the JS style.opacity will completely override any opacity CSS rules. This is my problem. How do I get around this?

Try to use css animation and remove code--> this.newContainer.style.opacity = 0;
.wrapper.animate-in {
opacity: 1;
transition: all 1000ms ease-in-out;
animation: animate-in01 1s;
animation-iteration-count: 1;
}
#keyframes animate-in01{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Rails, JS, CSS - can't get transition effect working

I have bar charts in my application that work fine but i'd like them to transition left to right on load across the screen. So I have tried the following:
CSS:
.progress-meter-interest{
background-color: #FFD733;
width: 250px;
}
.progress-meter-interest.horizTranslate {
animation-direction:normal;
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}
In view:
<div class="progress-meter-interest horizTranslate" style ="width: <%= homework.average_interest * 100 / 5 %>%"><%= homework.average_interest %></div>
JS:
<script>
$(document).ready(function() {
$( ".progress-meter-interest" ).each(function() {
var length = $( this ).data("bar-length");
$( this ).css('width', length);
});
});
</script>
Clearly I am not defining data-bar-length as a set value in the div as the graphs are dynamic. When I do define it the transition effect works.
How do I get it to work with the dynamic data?
Thanks. Appreciate any help.

The transition shorthand property needs to know which property to transition. At the very least you will need to change transition: 3s to transition: width 3s so your CSS should look like:
.progress-meter-interest{
background-color: #FFD733;
width: 250px;
}
.progress-meter-interest.horizTranslate {
animation-direction:normal;
-webkit-transition: width 3s;
-moz-transition: width 3s;
-ms-transition: width 3s;
-o-transition: width 3s;
transition: width 3s;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/transition for more details on the transition property.

CSS Transitions - understand functionality

I recently implemented Anno.js to my project. For styling purposes, I redesigned the "Anno Boxes" to use bootstrap modal layout.
This is what the AnnoBox normally looks like:
this._annoElem = $("<div class='anno anno-hidden " + this.className + "'>\n<div class='anno-inner'> <div class='anno-arrow'></div> </div>\n</div>");
this._annoElem.find('.anno-inner').append(this.contentElem()).append(this.buttonsElem());
And I just removed all anno classes and inserted the appropriate bootstrap classes for modal, so modal, modal dialog, modal-content, modal-hedaer) and stlying is fine, but there is one problem. Anno uses some transitions for the change of two boxes (see anno2.show) on Anno page. And after I removed those anno classes (causing the transitions) I have sth. like delays in between the time the boxes appear, because there is no transition any more. Now I'm wondering how I can implement the transition functionality to my modals as well.
For me it seems, that the transitions come from the classes anno and anno-hidden, which are defined the following:
.anno {
position: absolute;
padding: 15px;
z-index: 5000;
width: 300px;
cursor: default;
text-transform: none;
text-align: left;
line-height: 0.9em;
-webkit-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-moz-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-ms-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-o-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-webkit-transition-property: opacity, margin;
-moz-transition-property: opacity, margin;
transition-property: opacity, margin;
}
.anno.anno-hidden {
opacity: 0;
}
.anno-overlay.anno-hidden {
pointer-events: none;
opacity: 0;
}
You can also find the complete css at Annos Github and here the complete js.
I tried to add the code written in class Anno to my modal class as well, so I added
-webkit-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-moz-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-ms-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-o-transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
transition: all 300ms cubic-bezier(0.68, 0, 0.265, 1);
-webkit-transition-property: opacity, margin;
-moz-transition-property: opacity, margin;
transition-property: opacity, margin;
But this changes nothing. I'm not sure how this works, and how this all works together, so somehow it seems like it works with changing the opacity first from 100% to 0% (to fade out the first box) and then (on the other box) from 0% to 100%. But I have no idea so far how I can also get to this behaviour. Can somebody explain me, how this works exactly and how I could implement this?

Javascript rotate img when display

I have a script which display an img when we are attack by a monster.
So, the image is always in display="none" and when there is a monster it switch to display="";
I want the image do a 360° flip when it switch from display:none to display.
html : <img id="monster" style="display:none;">
js : var skinMonster = document.getElementById('monster');
When we are in fight, i do skinMonster.style.display="";
When the fight is over, i do skinMonster.style.display="none";
I don't how to detect the moment when the style change to rotate the picture.

You could add a CSS class at the same point where you change the display.
.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
overflow:hidden;
}
Which I slightly modified from this blog post: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html

I'd recommend using a CSS transition for the rotation.
HTML
<img id="monster" src="http://www.avatarsdb.com/avatars/mike_monsters_inc.jpg" />
<button id="show">Show monster</button>
CSS
#monster {
opacity: 0;
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#monster.show {
opacity: 1;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
JavaScript
var monsterImg = document.getElementById('monster'),
showMonsterButton = document.getElementById('show');
showMonsterButton.addEventListener('click', function() {
monsterImg.classList.add('show');
});
JSFiddle for demo purposes: http://jsfiddle.net/9wkA7/

Transitioning multiple objects across a div using css3/javascript

I have 3 objects (divs) that I want to transition simultaneously as soon as the page loads. To help animate this I am using a little bit of javascript which works perfectly with just the one object but I'm not sure how to rewrite the javascript to activate all 3 objects obey each objects individual styling.
I found an example of "Using transition events to animate an object" on the Mozilla Developer Network site ( https://developer.mozilla.org/en/CSS/CSS_transitions/ ), but unfortunately they disabled their forums so I couldn't find a solution.
Here is the basic HTML:
<body onload="runDemo()">
<div id="cloud-comtainter">
<div class="cloud1Right"></div>
<div class="cloud2Right"></div>
<div class="cloud3Right"></div>
</div>
</body>
I have 2 divs with an background-image, one to represent the object's styling while on the left and it's styling on the right positions.
Here is the CSS for the one object:
.cloud1Right {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:2%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
.cloud1Left {
width: 22em;
height: 9.375em;
background-image:url(../Images/header/clouds/clouds_biodesign-white.png);
background-position:center;
left:90%;
position:absolute;
top: 5%;
z-index:1;
-webkit-transition-property:left;
-webkit-transition-duration: 25s;
-moz-transition-property:left;
-moz-transition-duration: 25s;
-o-transition-property:left;
-o-transition-duration: 25s;
-ms-transition-property:left;
-ms-transition-duration: 25s;
}
And here is the Javascript that calls up this object and animates it to move right across the screen and then back again:
function runDemo() {
var el = updateTransition();
// Set up an event handler to reverse the direction
// when the transition finishes.
el.addEventListener("transitionend", updateTransition, true);
}
function updateTransition() {
var el = document.querySelector("div.cloud1Left");
if (el) {
el.className = "cloud1Right";
} else {
el = document.querySelector("div.cloud1Right");
el.className = "cloud1Left";
}
return el;
}
Now, my other 2 elements I want to transition at the same time are named .cloud2Left (and .cloud2Right) and .cloud3Left (and .cloud3Right) each with it's own specific styling (position, left %, transition rate, etc).
I've scoured the web for a solution and have messed around with the js. I looked here and around the Web and found information about selectors and how to use multiple selectors with no luck. I've tried using the multiple selectors like such:
var el=document.querySelector("div.cloud1Left, div.cloud2Left, div.cloud3Left");
and
var el=document.querySelector("div.cloud1Left");
var el=document.querySelector("div.cloud2Left");
var el=document.querySelector("div.cloud3Left");
and the same for the el.className
If anyone has any ideas or knows how to rewrite the javascript function to include all 3 objects (divs) and have them work simultaneously as soon as the page loads I would be greatly appreciative. Thank you in advance.

I think I have solution for you. I was doing a small thing today, based on the same example and this worked for me.
Basically I have one 'opener' which clicked turns and lets 3 other divs transition when turn is finished. Each one with its own speed. And back - when clicked to close - first 3 divs are closing and when this is finished - 'opener' turns finishing animation.
HTML:
<div id="opener" onclick="switch_toolbox('open')" class="vertical">Food Toolbox</div>
<div id="tools">
<h2 id="toolbox_title" class="title">Appliances</h2>
</div>
<div id="freezer">
<h2 id="food_title" class="title">Food store</h2>
</div>
<div id="spicebox">
<h2 id="spices_title" class="title">Spices</h2>
</div>
CSS:
#opener{
display:block;
overflow:hidden;
width:8.8em;
background-color:#F00;
font-weight:600;
font-size:1.5;
padding:0 0.5em;
cursor:pointer;
transition:all 0.5s ease 0s;
-moz-transition:all 0.5s ease 0s; /* Firefox 4 */
-webkit-transition:all 0.5s ease 0s; /* Safari and Chrome */
-o-transition:all 0.5s ease 0s; /* Opera */
-ms-transition:all 0.5s ease 0s; /* IE */
}
.vertical{
-webkit-transform: rotate(90deg), translate(3em,3em);
-moz-transform: rotate(90deg) translate(3em,3em);
-o-transform: rotate(90deg) translate(3em,3em);
-ms-transform: rotate(90deg) translate(3em,3em);
transform: rotate(90deg) translate(3em,3em);
}
.horizontal{
-webkit-transform: rotate(0), translate(0,0);
-moz-transform: rotate(0) translate(0,0);
-o-transform: rotate(0) translate(0,0);
-ms-transform: rotate(0) translate(0,0);
transform: rotate(0) translate(0,0);
}
#tools{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1.5s ease 0s, height 1s ease 0s;
-moz-transition:width 1.5s ease 0s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 0s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1.5s ease 0s, height 1s ease 0s; /* Opera */
-ms-transition:width 1.5s ease 0s, height 1s ease 0s; /* IE */
}
#freezer{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 1s ease 0.5s, height 1s ease 0s;
-moz-transition:width 1s ease 0.5s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1s ease 0.5s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 1s ease 0.5s, height 1s ease 0s; /* Opera */
-ms-transition:width 1s ease 0.5s, height 1s ease 0s; /* IE */
}
#spicebox{
display:block;
overflow:hidden;
height:1.2em;
width:0;
transition:width 0.5s ease 1s, height 1s ease 0s;
-moz-transition:width 0.5s ease 1s, height 1s ease 0s; /* Firefox 4 */
-webkit-transition:width 1.5s ease 1s, height 1s ease 0s; /* Safari and Chrome */
-o-transition:width 0.5s ease 1s, height 1s ease 0s; /* Opera */
-ms-transition:width 0.5s ease 1s, height 1s ease 0s; /* IE */
}
And finally JS:
function switch_toolbox(direction){
var spicebox = document.getElementById('spicebox');
var opener = document.getElementById('opener');
if(direction=='close'){
closeem();
spicebox.addEventListener("transitionend", closeme, false);
}else{
openme();
opener.setAttribute('onclick','switch_toolbox("close")');
opener.addEventListener("transitionend", openem, false);
}
return false;
}
function openme(){
var opener = document.getElementById('opener');
opener.setAttribute('class','horizontal');
}
function closeme(){
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
opener.setAttribute('class','vertical');
opener.setAttribute('onclick','switch_toolbox("open")');
var tools = document.getElementById('tools');
}
function openem(){
var opener = document.getElementById('opener');
opener.removeEventListener("transitionend", openem, false);
var spicebox = document.getElementById('spicebox');
spicebox.removeEventListener("transitionend", closeme, false);
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
tools.style.backgroundColor='#EBD3A3';
tools.style.width='20em';
freezer.style.width='20em';
freezer.style.backgroundColor='#B7CEEC';
spicebox.style.width='20em';
spicebox.style.backgroundColor='#FFA500';
}
function closeem(){
var tools = document.getElementById('tools');
var freezer = document.getElementById('freezer');
var spicebox = document.getElementById('spicebox');
freezer.style.height='1.2em';
spicebox.style.height='1.2em';
tools.style.height='1.2em';
tools.style.width='0';
freezer.style.width='0';
spicebox.style.width='0';
}
Hope this help, and this is what you were looking for
Best
Pifon