I would like to make some smooth transitions between pages navigation in Wicket Java framework. Is it possible with Wicket tools, javascript and css? I cant find a way to do that.
Thanks for any answer.
Wicket does not provide solutions for this. Most of the Wicket applications use either full page re-remder/redirect or Ajax for updating just part(s) of the page, but not the whole body.
I'd suggest you to try with CSS Keyframes. The idea is to add CSS class to the body of your pages on these two JS events: beforeunload and DOMContentLoaded (aka domready). When beforeunload is fired you need to remove fade-in and add fade-out CSS class. And do the opposite for DOMContentLoaded.
The CSS will look like:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
I am not very good in CSS so better ask Google for more info.
Related
I have a flash message div at the top of my page for when the site wants to display any messsages to the user.
I want the flash message to fade out after a couple of seconds. I'm using a CSS transition.
Here is my code:
.flash {
position: fixed;
opacity: 1;
visibility: visible;
transition: opacity 2s ease-in, visibility 2s ease-in;
}
.hide {
visibility: hidden;
opacity: 0;
}
document.querySelectorAll('.flash').forEach(function(flash){
flash.classList.toggle('hide');
})
I expect that when the page loads, the div will be visible before fading out. But, in Safari, when the page loads, .flash is invisible.
In Chrome, the page loads and the .flash div fades as expected. However, on reloading the page, the div still has the .hide class attached and so the flash message remains invisible. (I can store state in HTML?!!) Strangely, in Chrome, it works if I'm inspecting an element in the document with developer tools when I reload the page.
Now I'm highly confused.
Why does .hide remain attached to the div across page reloads?
Why does Safari fail to display the div at all?
EDIT: after your comment reply, what you need to do is trigger the fadeout on a focus event.
.flash:focus {
//use the fadeout code here
}
The reason is the toggle, your browser saves the state of the page in the browser's cache but not the javascript that is dynamically changing the css on reload, on and off.
Instead of manipulating the css with javascript, google fade out with css.
.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
#keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
it's a lot smoother this way, and you can test it more easily with the developer tools.
I just implemented CSS animation on a page like this:
#-webkit-keyframes backdrop-roll{
to { background-position-x:100%; }
}
body
{
background-image:url('http://www.wallmay.net/thumbnails/detail/20120331/pokemon%20fields%20ruby%201920x1200%20wallpaper_www.wallmay.com_2.jpg');
background-size: 800px 650px;
-webkit-animation: backdrop-roll 8s linear infinite;
-webkit-animation-direction:normal
}
There's a button that changes the background and I want that image to stay still so I tried this via Jquery:
$('body').css('-webkit-animation-play-state','paused');
That was what came to mind, but for some reason it instead stops everything from working. This is new to me so I'm not sure what to even look up(I find how to stop it with css not a jquery event).
I would place the animation play state properties into their own classes like this:
.play{
-webkit-animation-play-state: running;
}
.pause{
-webkit-animation-play-state: paused;
}
Then you can use jQuery to control the animation:
$(document).ready(function(){
$('body').addClass('play');
$('#pause').click(function(){
if($('body').hasClass('play')){
$('body').removeClass('play');
}
});
$('#resume').click(function(){
if(!$('body').hasClass('play')){
$('body').addClass('play');
}
});
});
Here's an example: http://jsfiddle.net/F2nQM/
Dearest stackoverflowers,
I'm new to Angular JS and have read some stuff on how to animate the Angular way, still I'm very much confused on how to correctly implement it and what classes get added when and where. I feel like I had much more control over my animations with traditional jQuery (adding and removing classes). But maybe this is just because I'm used to it that way.
On pageload I want certain elements to animate in. So in my controller, on pageload, a variable (pageLoaded) gets set to true. And my surrounding content-wrapping div will have ng-show="pageLoaded".
This way I have successfully added an animation on the entire page using following CSS transitions/animations:
.page.ng-hide-add, .page.ng-hide-remove {
display:block!important;
}
.popup.ng-hide-add {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
But once I try to address child elements, the animations fail.
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child {
-webkit-animation: 450ms bounceInRight reverse;
}
.popup.ng-hide-remove .child {
-webkit-transform: translateX(100%);
-webkit-animation: 750ms bounceInRight;
}
Is this not supported by Angular? Or am I doing something wrong?
And if I understand correctly, no matter if you're using ng-hide, or ng-show..
the ng-hide classes should be used? Where they follow following logic:
ng-hide-remove/ng-hide-remove-active show the element
ng-hide-add/ng-hide-add-active hide the element
Can someone explain the difference between the regular and the active classes? How should they be used?
It seems that Angular scans the document for things to animate, I have found that when wanting to animate a child element. You have to set a transition on the parent for as long as you want the children to transition.
For example.
.page.ng-hide-add, .page.ng-hide-remove {
-webkit-transition: 1000ms;
}
.page.ng-hide-add .child, .page.ng-hide-remove .child {
display:block!important;
}
.popup.ng-hide-add .child h1 {
-webkit-animation: 450ms bounceInRight;
}
.popup.ng-hide-add .child h2 {
-webkit-animation: 750ms bounceInRight 250ms;
}
Angular will only add the 'animation' classes, if the HTML element with the NG-IF/NG-SHOW or ng-whatever element has a transition in the CSS specified for it.
I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.
I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:
http://thegoodman.cc/about/
It's done using CSS animations. When looking at the source, you'll find this line of code:
.sup {
animation:sup 1.8s backwards;
}
#keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
It'll fade in the text (using opacity) and move it up using translateY .
JSFiddle example.
Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.
I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.
You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.