So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end.
Here is the CSS:
.cloned_object {
position:absolute;
background-color:white;
width: 700px;
height: 640px;
margin: 0; /*for centering purposes*/
-webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
-ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ;
transition: width 1s, height 1s, top 1s, left 1s, margin 1s;
}
and the JS function:
$('.content_cell').on('click', function(event) {
// if the user is on a browser older then IE9
if ($.browser.msie && $.browser.version.substr(0,1)<10) {
var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top,
opacity:1.0}) ;
selectedPos = $(this).position();
var currentPos = $('#invitedToChatCell').position();
$clonedElement.animate({
height:640, width:700,
//position:'absolute',
left:currentPos.left,
top:currentPos.top,
opacity:1.0
}, 500, function(){ $('.cloned_object > ul').toggle(); });
} else {
var currentPos = $('#invitedToChatCell').position();
var $clonedElement = $( this ).clone(true).attr('class', 'content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top}) ;
$clonedElement.addClass('cloned_object');
$clonedElement.css({'margin-left':-$(this).position().left+125,
'margin-top':-$(this).position().top,
}) ;
selectedPos = $(this).position();
$('.cloned_object > ul').toggle();
}
event.stopPropagation();
});
I am really at a loss as to why it would be different across browsers. I was hoping someone could enlighten me as to what is going on...
Here is the jsFiddle link. If you run it in both browsers, you will see the animation position is different. In FF, it looks like the box grows, that is what I want. In chrome it's very strange...
Your transitions explicitly request that the "top" and "left" be animated. They've got to start from somewhere, so they start from zero. It's a weird case because the "cloned-element" style is not what's giving the element the "top" and "left" values, it's your code which puts them straight on the element.
You're also animating the margin, however; Chrome doesn't seem to pay much attention to that. If I take the "top" and "left" properties out of the transition, it makes it act a little more like Firefox.
The concept of applying a transition to an element at the same time it comes into existence is a little confusing to me. I hope somebody comes along and provides a better answer.
Related
I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)
Add opacity:0; to the .two CSS so that it will fade in.
Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)
I am doing some simple CSS animation.
This is my CSS:
#contactBtn {
transition: width 1.5s, height 1.5s, transform 1.5s;
}
Then in my JS on click I do:
contactBtn.style = "width: 61em; height: 35em; transform: translateX(0)";
The width and height animate as expected, taking 1.5s to increase from their original. The transform also occurs - the element moves to where I expect it to be. But it jumps instantly rather than delaying.
So far have only tested in Chrome.
I have tried splitting out the CSS, as below, without success:
#contactBtn {
transition-duration: 1.5s;
transition-property: width height transform;
}
Thanks in advance for any answers.
I am making a jqm project mobile only.
I have two panels one set to push the other is overlay. One is in the left corner and the other is top right corner.
My question is it possible to set the right panel to 100% width (which I've done) and set the height to 10-20% (40px-50px).
Can this be done without breaking any functionality? Can it be done in Css? I'm able to set width but unable to set height.
Thanks in advance!!
Customizing a right or left panel you will need to change 3 CSS classes set by JQM. The animation, the panel, and the inner part of the panel which is were the content is in. An easier way is to create custom overlay box.
Demo
https://jsfiddle.net/bz649m86/
Html
<div class="box"><a class="close">Close</a></div>
CSS
.box {
position:fixed; // a fixed position is used for the box
top:0; // placed at the top of the screen
right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
background-color: blue;
width: 100%; //with a width of the whole screen, but it can be any width
display: block; //displayed in block format
z-index: 999999; // above the header when in view
overflow: hidden; // if you don't require scrolling within the box
height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Jquery
// animate on click to bring the box in to view
$(document).on("click", ".pannel", function () {
$('.box').animate({
'right': "0%"
}, 300);
})
// and out of view when closed
$(document).on("click", ".close", function () {
$('.box').animate({
'right': "-100%"
}, 300);
})
As a side note, with this method you can have a custom panel (overlayed) displayed anywhere on the screen.
In this demo the box comes from top of the screen
https://jsfiddle.net/Lqxp2ewb/
As mentioned:
$(document).on("click", ".pannel", function () {
$('.box').animate({
'top': "0%"
}, 200);
return false;
})
$(document).on("click", ".close", function () {
$('.box').animate({
'top': "-100%"
}, 200);
return false;
})
Not sure is if return false is better than preventDefault and stopPropagation. Tried both, either way, very smooth on mobile devices.
The .ui-panel CSS from jQueryMobile.css defines a min-height attribute of min-height: 100%
So you have to override the min-height attribute.
Since your height value is lower than the min-height value of 100% it has no effect.
In my case i want to set the panel under a fixed header bar, so i use:
top: 38.4px;
min-height: calc(100% - 38.4px);
So a friend and I are having a bit of trouble with webkit. We're trying to animate a specific div to do a 720° rotation and using transition to animate the container itself, with the rotation being triggered by a javascript function.
This works absolutely fine in Firefox and IE, but once we switch over to a webkit-based browser, the rotation transition doesn't work.
When monitoring the page through the developer tools, we can see that the specific properties are assigned to the div, only the transition isn't being rendered.
The javascript is as such:
function projtheme() {
var proj_title = document.getElementById("ring_1");
proj_title.style.animation = "none";
proj_title.style.WebkitAnimation = "none";
proj_title.style.transform = "rotate(720deg)";
proj_title.style.WebkitTransform = "rotate(720deg)";
proj_title.style.opacity = "0.1";
}
function projtheme_exit() {
var proj_title = document.getElementById("ring_1");
proj_title.style.animation = "spin_cw 60s linear infinite";
proj_title.style.WebkitAnimation = "spin_cw 60s linear infinite";
proj_title.style.transform = "rotate(0deg)";
proj_title.style.WebkitTransform = "rotate(0deg)";
proj_title.style.opacity = "0.6";
}
And said javascript functions are called in this way:
<span id="projbtn" onmouseout="projtheme_exit();" onmouseover="projtheme();"></span>
The CSS of the animated div has the properties it needs set to it (namely the transition properties):
#ring_1{
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -150px;
opacity: 0.6;
display:block;
animation: spin_cw 60s linear infinite;
-webkit-animation: spin_cw 60s linear infinite;
transition: all 0.5s ease;
}
Help on this would be much appreciated, thanks!
UPDATE: Removing the animation function on said div seems to fix the issue, and the transition runs. The problem is, that animation needs to stay.
UPDATE 2: Inserting an alert between the lines that set the animation styles and those that set the transform properties inside of the script seems to make the transition work.
I have a div that is 500px wide in a container that is 3500px high, and I want the 500px div to slowly decrease in width to half its original width as I scroll down the page. Everything I've tried with .scroll in jQuery is making the width change as soon as the page loads instead of as the page is scrolled down.
EDIT I'd like the width to scale up and down as the page is scrolled up and down.
Here's an example of what I started with, I know it's obviously not correct:
$(document).ready(function() {
$('#box').scroll(function() {
$('#box').css('width', '250px');
});
});
Here is working fiddle, that dynamically changes it's width http://jsfiddle.net/CWe9t/1/
$(document).ready(function () {
var initialWidth = $("#box").width();
var minWidth = 250;
$(document).scroll(function () {
var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
$('#box').css('width', x);
});
});
$(window).scroll(function() {
$( "#box" ).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
});
});
Are you calling scroll function on your box scrolling? No, it's window you are calling scroll function
$(document).ready(function() {
$( **window** ).scroll(function() {
$('#box').css('width', '250px');
});
});
and about slowly decrease size apply this css3 properties on your box
#box
{
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
apply css3 animation as it is more smoother to animate if many animations on same page same time and Jquery animation if that's only one simple animation as told by #daguru.