I have a small nifty game I'm trying to develop at this link which has css transition class definitions
`el {
transition: transform .3s;
-webkit-transition: -webkit-transform .3s;
position:absolute;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
top:0;
}
.close {
transition-duration: .15s;
-webkit-transition-duration: .15s;
}
.open {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}`
on elements and uses a [prefix]TransitionEnd event to function.
$el.on(transitionEnd,function(){ // transitionEnd is a polyfill result from browser sniff
if($el.hasClass('close'))
setTimeout(function(){
$el.addClass('open');
},Math.random() * 2500));
else $el.addClass('close').removeClass('open');
});
The expected result is that the function would change the element's translate3d() based on the class add/removed each time the transition ends.
I am able to see this in action on desktop and mobile browsers except for the Samsung Galaxy S3 running Android 4.3. I was told that on the S3 that it runs only once and the elements remain with the ".close" class. I don't have an actual device but the little debugging I did is leading me to believe that the [prefix]TransitionEnd is not firing when changing the class definitions which affects the transitions. Can anyone with a Samsung S3 with Android 4.3 try it out and let me know if it works...and what workaround I can use to solve it?
Related
I am clueless with an CSS problem and would appreciate any help.
I am creating a website for my local sports club and am not a full time code expert so the solution might also be obvious.
So far I ve created a mobile menu and now added some animations now. Adding the animations caused a the login modal that appeared onclick on "Login" not to work anymore.
Here is a code snippet showing the problem.
https://codepen.io/bvonr/pen/BaZvzPR
The problem is caused by the following code:
.login {
opacity: 0;
transform: scale(1.15) translateY(-30px);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.mobilenavigation .login {
transition-delay: 0.21s;
}
.mobilenavigation.menu-opened .login {
opacity: 1;
transform: scale(1) translateY(0px);
transition-delay: 0.55s;
}
If you remove lines 259 -272 from the codepens CSS, the animation for the login button doesnt work, if you keep them, the modal doesnt show up.
On the website I have barely any access to change the HTML so I am pretty much limited to CSS and JS
I would appreciate any help or idea.
this is my first question because I can't find a similar one.
So, I try to hide some elements when my page is ready and also an animation. It just doesn't work. Sorry for my English and I'm also very new to Jquery. Here you see the code:
$(document).ready(function(){
$("#mainbox-search-main").show();
$("#mainbox-search-extra").hide();
$("#mainbox-login").hide();
$("#mainbox-register").hide();
$("#mainbox-pasfor").hide();
$(".fab").animate({
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
transform: rotate(180deg)
});
});
It's hard to replicate it without a JSFiddle: http://www.jsfiddle.net
However, to make it easier on yourself just add a class with those properties:
JQuery
$(".fab").addClass('animate-it');
CSS
.animate-it{
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
-moz-transform: rotate(180deg) /* Firefox */
transform: rotate(180deg)
}
In addition, you don't really need to hide any elements when the document is being loaded. Just initially set those displays to none.
#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{
display:none;
}
When you want to show them, just use the show() method that you have used for the #mainbox-search-main element.
Addressing Unnecessary Lag Time
I also want to point out that you may want to add a delay to the animation in case there is some undesired lag time between when the animation fires, and the DOM is considered to be loaded.
$(".fab").delay(500).addClass('animate-it');
Conclusion: Adding a Callback Function
With the hidden elements being taken care of in the CSS, we have a shorter amount of code to work with. To ensure that the animate happens AFTER the #mainbox-search-main element is shown, try adding a callback function to it:
$(document).ready(function(){
$("#mainbox-search-main").show(function(){
$(".fab").delay(500).addClass('animate-it');
});
});
It seems that jquery hover (and presumably the underlying browser events) cannot be reliably used to keep track of which element the mouse is over when animations are involved, since the events do not fire if an element moves under or away from the mouse (rather than the mouse moving into the element).
See this fiddle for an example of the issue I'm having. If you hover over the div, the state according to the hover tracking events always disagree with reality, at least by the end of the animation.
I haven't tested this outside chrome, but I'm assuming the same behaviour across browsers.
HTML:
<div>hover me</div>
<p>state</p>
CSS:
div {
-ms-transition: -ms-transform 1s;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
}
div:hover {
position: relative;
-ms-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
JavaScript:
$('div').hover(function() {
$('p').text('over');
}, function() {
$('p').text('out');
});
While the fiddle isn't a realistic example, I'm experiencing this issue in a webpage with animations. The question I have is how do I ensure that my javascript correctly knows the hover state after animations? I'd like to do this without having a global mousemove event to follow the mouse (i.e. so that I can look for the element under the last coordinate at the end of each animation).
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");
});
I have a simple CSS3 fade in page transition, which works well (ONLY care about IE10+). Here's what it looks like:
HEAD
body
{
opacity: 0;
transition: all 1s ease;
}
.loaded
{
opacity:1;
}
BODY
<body onload="document.body.classList.add('loaded');">
The only problem now, is that if the page has a lot of images, the onload event is triggered only when all of them are downloaded.
What can I do, using pure javascript or CSS to do the fade in, even while images are downloading?
NOTE: Can't use any external js files or frameworks.
As you only care about IE10+ (and other major browsers I assume), you can use the HTML5 event DOMContentLoaded.
document.addEventListener('DOMContentLoaded', function () {
document.body.classList.add('loaded');
}, false);
This is supported in Chrome 0.2+, FF 1.7+, IE 9+, Opera 9+ and Safari 3.1+.
You could use pure CSS
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element-to-fade-in
{
opacity:1;
animation: fadein 1s;
}
Don't forget to add the prefixes