CSS Transitions - understand functionality - javascript

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?

Related

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

Isotope translate3d values are increased

Please i need help i used isotope to filter my projects but projects are not well organized because inline style translate3d values are increased .. for example the first project should start with values 0px, 0px, 0px but in my case it starts at 40px, 0px, 0px
Without including javascript code i see 4 projects well organized like this
But when i include JS code i 3 projects at one row and not organized as it should be
Please visit my website to understand the problem the projects block positioned at the bottom of the page above the footer
Javascript
jQuery('document').ready(function () {
var portfolio = jQuery('#portfolio');
var items = jQuery('.items', portfolio);
var filters = jQuery('.filters li a', portfolio);
items.imagesLoaded(function() {
items.isotope({
itemSelector : '.item',
layoutMode : 'fitRows',
transitionDuration : '0.7s'
});
});
});
CSS
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope-item {
/*I removed "transform 0.5s" and "!important"*/
transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-ms-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
You're using a very old version of isotope, v1.5.25 (from 2013) but initiating it with js code from the current version ( transitionDuration: is not part of the old version). The most current version is v3.0.4 which does not use the .isotope css. Upgrade isotope.js to the current version and remove the above CSS.
Like Fenici said in his comment, the solution to this is to drop the internal padding on your <ul> like this:
ul.items {
padding: 0;
}
Currently, there is a padding-right:40px; on the itemSelector's parent which is not used during the calculation of the isotope elements positioning due to the different box model usage in JavaScript (and subsequently Isotope).

jQuery on hover opacity

I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.
You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
​
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).
Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});​
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/
$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)
This works:
​$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});​

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.
Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);
Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}
something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);
You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}

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

Categories