CSS3 Javascript trigger transition animation - javascript

I have a DIV class setup as follows:
div.map_view{
height: 420px;
transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */
}
The purpose is when I change the height of this DIV, it animates a scroll (up in this case). When I call this function in my script:
document.getElementById('map_view').style.height = '0px';, it just immediately disappears (doesn't animate). However, if I comment this out and call the exact same line in my JS debugger, the animation works.
Why is this? What am I missing that causes it to do nothing in my script?

I know I've cut a couple of corners with this by using jquery but here's what I got:
http://jsfiddle.net/qZ6J4/7/
Take a look at that.

I actually found a helpful tutorial here: CSS3 Transitions in JavaScript. I basically setup my two CSS3 class definitions and use jQuery's .toggleClass() function to change between the two.

Related

How to prevent transition to run on page load after height is set with javascript in Safari?

I have a div on a page with liquid height that i want to animate with CSS transitions to collapse/expand.
I set the default height of the div using JS, so if i change the height with CSS, it can easily revert back to the original state. Works fine, the issue is that the height animation will run on page load in Safari. (works fine in Chrome) Any idea how to fix this?
CSS:
div {
background: red;
transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
overflow: hidden;
}
div.hide {
height:10px !important;
}
JS:
$div = $('div');
$div.height($div.height());
$div.click(function(){
$div.toggleClass('hide');
});
Demo:
https://jsfiddle.net/69taau5m/1/
It might be a little hacky but you could always apply the transition to your div on click as well.
Did this pretty quick but it works. Check out the fiddle. Could always add some logic to only apply css on the first click.

Getting CSS transition animation to work

I'm currently playing around with CSS animations and I'm looking to take a flat hand and have the hand move down the page i.e have a blank page and have a hand move down the page. As such I have been unsuccessful.
Here is my HTML code:
<div id ="splash" data-role="page">
<center>
<img id='Hand' style="position:absolute;top:-30%;" src="css/images/hand.gif">
</center>
</div>
Now I've been following a tutorial and have been using the following CSS:
.handmove{
transform: translate(0,1000px);
-webkit-transform: translate(0,1000px); /** Safari & Chrome **/
-o-transform: translate(0,1000px); /** Opera **/
-moz-transform: translate(0,1000px); /** Firefox **/
}
.objecttransition{
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
From what I understand is .handmove is used to move the images position from -30% to 1000px down the screen. But the objecttransition class is to allow this movement to animate from point -30% to 1000px down. Correct me if I'm wrong?
Now what I look to do is as the page loads I want to add these classes to the hand using jQuery:
$(document).on('pagebeforeshow','#splash',
function()
{
$("#hand").addClass("objecttransition");
$("#hand").addClass("handmove");
});
I've also used the .ready() event but that also doesn't seem to work. I'm not to sure why the animation isn't working? Any ideas?
I would guess, the problem is the spelling,
id='Hand'
vs
$("#hand")
Use the same capitalization in both places.
Sigh... Silly Error!! With the .addClass() I used hand instead of Hand.Change .addClass('hand') to .addClass('Hand'). I then used the .ready() instead of on('pagebeforeshow','#splash',. Thus we have:
$(document).ready(
function()
{
$("#Hand").addClass("objecttransition");
$("#Hand").addClass("handmove");
});

Draggable JS Bootstrap modal - performance issues

For a project at work we use Bootstrap Modal windows in JavaScript. We would like to make some of the windows movable, but we are running into performance issues with JQuery.
$("#myModal").draggable({
handle: ".modal-header"
});
Example ,
Source .
In IE9, it works as expected.
In Chrome, horizontal dragging works as expected, and vertical dragging is rather slow but not problematic.
In Firefox, horizontal dragging works as expected, but vertical dragging is extremely slow.
It's strange, because the example window is not graphically heavy and JQuery is supposed to normalize browser behavior. I tried solving this without using JQuery's draggable, but I ran into the same issue.
So I have a couple of questions:
Is the slow performance the fault of the browser, JQuery, Bootstrap or is my code not optimal?
Why is there a difference between horizontal and vertical dragging?
Should I find a workaround, or just avoid Bootstrap altogether for dynamic popups?
Kind regards,
Guido
I found a few ways to fix this.
Adding this to your CSS file will disable the transition effects while the modal is being dragged. It appears however that once the user drags the box the fly in will not occur correctly but rather it will just fade in.
.modal.fade.ui-draggable-dragging {
-moz-transition: none;
-o-transition: none;
-webkit-transition: none;
transition: none;
}
Alternatively adding the following to your CSS file and the nofly class to your model will disable the fly in all together but not the fade in:
.modal.fade.nofly {
top: 10%;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
I found that at bootstrap 3 I had to override these css properties of the modal dialog:
.modal
{
overflow: hidden;
bottom: auto;
right: auto;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
Fiddle
Full screen demo
This does not exactly answer your questions, but you may try to disable the *-transition properties or decreasing the time value from the specified 0.3s. This is defined in .modal.fade. But this will mess with the initial pop-up animation too. If this is not acceptable, you may use the start event of the draggable widget to apply the new style.
With Bootstrap 3.3 and jQuery UI 1.1 I'm adding a class called "modal-draggable" to the element with the "modal" class.
It binds to the .modal-dialog element inside containers with the .modal-draggable class (unlike some examples here which bind to the actual container).
There is some CSS so scrolling for long dialogs still work across devices of all screen sizes.
CSS:
.modal-draggable .modal-backdrop {
position: fixed;
}
.modal.modal-draggable {
overflow: overflow-y;
}
.modal-draggable .modal-header:hover {
cursor: move;
}
JavaScript:
$(".modal-draggable .modal-dialog").draggable({
handle: ".modal-header"
});
See the JS Fiddle here for a demo:
http://jsfiddle.net/jcosnn6u/3/
NB: So far I have only tested this in Chrome, Firefox and Safari and mobile devices, so can't comment on Internet Explorer compatibility.
I prefer using jqueryui. More detail about draggable API here: http://api.jqueryui.com/draggable/
Although the suggested CSS changes worked for me, I didn't like the dialog being shown on the left initially. Upgrading jquery UI from 1.9 to 1.11 fixed the issue I was seeing

Slide + fade effect using CSS transitions

I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...
You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.
I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.

CSS transition-duration does not update the transition?

I am currently writing a jQuery plugin to create / manage CSS transitions, and I found this strange behavior with transition-duration.
Apparently, while a transition is running, any changes to the duration property are ignored unless the properties being transitioned receive a different value. The duration itself does not cause the transition to change.
Following is some code which shows an example of this, and below are some links to jsFiddle to give you a better idea of the transition behavior I am trying to achieve.
/* starting transition */
.t1 {
-webkit-transition-duration: 5s;
-webkit-transition-property: width;
width: 500px;
}
/* during the above, this will do nothing */
.t2 {
-webkit-transition-duration: 200ms;
-webkit-transition-property: width;
width: 500px;
}
/* but this will override the transition as expected */
.t3 {
-webkit-transition-duration: 200ms;
-webkit-transition-property: width;
width: 501px; /* 1 pixel added */
}
jsFiddle 1 - CSS duration problem: http://jsfiddle.net/danro/Kd58j/
jsFiddle 2 - Desired effect w/ jQuery: http://jsfiddle.net/danro/xPwc4/
Any ideas on how to force the transition to accept the updated duration?
UPDATE
It looks like this behavior is defined in the spec, but I am still open to a workaround if anyone has one.
(From www.w3.org/TR/css3-transitions/#starting)
Once the transition of a property has started, it must continue running based on the original timing function, duration, and delay, even if the ‘transition-timing-function’, ‘transition-duration’, or ‘transition-delay’ property changes before the transition is complete.
I've run into the same issue when I needed to overwrite transition-duration but leaving the transition-property intact. The only simple workaround I've found so far is to actually change transition-property a little bit, i.e. instead of opacity: 0 make it opacity: 0.0001.
just tested your first link with Chrome and Safari and it works fine, just like the jQuery example :)

Categories