When I do a Page Transition with jQuery Mobiles data-transition="slideup" the Page itself will fadeOut, and only after that the slideup of the Page will occur.
This behaviour seems to be consistent with jQuery Mobile itself since even the Documentations have the same issue.
I want to disable this fade. I want the new Page to just slide up without any fading happening. This should be possible.
A simple jQuery slideIn() perhaps? But I want to do it the proper way, perhaps some one already figured this one out?
Note: I tried -webkit-backface-visibility: hidden but it seems unrelated to this, since the actual slideup transition is done. Just after the page fades....
I have solved this issue on my own.
I have two pages #one and #two. After clicking on a button in #one page #two is supposed to slideup from the bottom. Now to prevent a fadeOut of the first page, which jQuery Mobile would usually do before sliding up the second page I created a custom animation like this:
#-webkit-keyframes dontdoshit {
from { -webkit-transform: translate(0,0); }
to { -webkit-transform: translate(0,0); }
}
#-moz-keyframes dontdoshit {
from { -moz-transform: translate(0,0); }
to { -moz-transform: translate(0,0); }
}
#keyframes dontdoshit {
from { transform: translate(0,0); }
to { transform: translate(0,0); }
}
Now I'm making sure this animation is called upon page #one, whenever it would otherwise fade away before page #two slides up.
.slideup.out {
-webkit-animation-name: dontdoshit;
-webkit-animation-duration: 1ms;
-moz-animation-name: dontdoshit;
-moz-animation-duration: 1ms;
animation-name: dontdoshit;
animation-duration: 1ms;
}
.slideup.in.reverse {
-webkit-animation-name: dontdoshit;
-webkit-animation-duration: 1ms;
-moz-animation-name: dontdoshit;
-moz-animation-duration: 1ms;
animation-name: dontdoshit;
animation-duration: 1ms;
}
Finally to prevent jQuery Mobiles Scriptlet of hiding my first page I forced
#one {
display: block!important;
z-index: 2;
}
and have given page two a higher z-index so it would be on top of page one
#two {
z-index: 9999;//this is quite a lot :o
}
Related
I have a problem with image animations only on mobile. On the desktop it works well and on the mobile when I enter the site for the first time, something wrong happens only the first time I enter. If I refresh the page, it works well on furniture. I mention that on the div below with texts it works ok but not on images.
.slide-in-left {
animation-duration: 2s;
animation-name: slide-in-left;
}
.slide-in-right {
animation-duration: 2s;
animation-name: slide-in-right;
}
#keyframes slide-in-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
#keyframes slide-in-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
You can see in the gif below what is happening:
https://gifyu.com/image/SM16Q
Thank you in advance.
Current I am using some animations with my sliding ionic list such as sliding in from left to right and content from fading in as per this tutorial. https://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/
#-webkit-keyframes animateInPrimary {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
#-webkit-keyframes animateInSecondary{
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-in-primary {
-webkit-animation: animateInPrimary;
animation: animateInPrimary;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
.animate-in-secondary {
-webkit-animation: animateInSecondary ease-in 1;
animation: animateInSecondary ease-in 1;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
Now I would want the ion-items to slide one after the other. I think I have to use the css property -webkit-animation-delay. But i am not sure where to insert it. Hope someone can help. Thanks,
Ashley
If you wanted to do this with CSS animations then what you would need to do is add an incremental class to each list item and then stagger your animations accordingly as demonstrated here: CSS Animations with delay for each child element
The easier way to do this is with the built in stagger function of the animations module - take a look at this article: https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#
I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>
Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example
Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
I'm trying a technique described on CSS Tricks:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
I'm a bit stumped on this one... When I view the technique on the CSS Tricks website in Safari, it works fine... However, when I try the code out, I can't get it to work on Safari... Works fine in Firefox and Chrome.
Anyone have any ideas?
I greatly appreciate some extra eyes on this, because I've been staring at this way too long.
Thanks in advance.
JSFiddle:
http://jsfiddle.net/pjbsL1mk/1/
The code is pretty much verbatim, except that I added "-webkit-" along side the original code to the classes... Also, I'm using jQuery 1.8.3.
.come-in {
-webkit-transform: translateY(150px);
-webkit-animation: come-in 1s ease forwards;
-webkit-animation-delay: 0.2s;
transform: translateY(150px);
animation: come-in 1s ease forwards;
animation-delay: 0.2s;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s; /* So they look staggered */
}
.already-visible {
-webkit-transform: translateY(0);
-webkit-animation: none;
transform: translateY(0);
animation: none;
}
#-webkit-keyframes come-in {
to {
transform: translateY(0);
}
}
#keyframes come-in {
to {
transform: translateY(0);
}
}
You forgot to add -webkit- prefix on some properties:
#-webkit-keyframes come-in {
to {
-webkit-transform: translateY(0); // here
}
}
This should make the animation work. Also add -webkit- here:
.come-in:nth-child(odd) {
-webkit-animation-duration: 0.6s; // here
}
I'm sure it's a simple answer, but I'm trying to figure out how to hide the animation below: until it enters the div.
.slideInDown {
-webkit-animation-name: slideInDown;
-moz-animation-name: slideInDown;
-o-animation-name: slideInDown;
animation-name: slideInDown;
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
I want the final to look similar to the first animation in the center of this page: www.laracasey.com.
Thanks!
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
To do this, you must specify two things:
Specify the CSS property you want to add an effect to and Specify the duration of the effect.
For example:
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
Try it yourself. You can see more in W3schools
Or if you want to use JQuery. Here is an example :
$("div").hover(function() {
$(this).addClass("slideInDown");
});
In your case :
I create the div the simulate your situation:
div
{
width:100px;
height:100px;
background:red;
}
Simply declare the class and animation name :
.sideInDown{
animation:slideInLeft 5s;
-webkit-animation:slideInLeft 5s; /* Safari and Chrome */
}
Create the keyframs :
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
}
}
Finally, use the JQuery to add a class when a mouseover event happens:
$("div").hover(function() {
$(this).addClass("sideInDown");
});
You can see how it acts from my demo
you mean something like this one?
http://fiddle.jshell.net/sijav/PjEb5/
you need to place your thing to animate in the div and make the overflow of that div as overflow:hidden
hope it helps