Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Animate widget using CSS3

Stefan Gebhardt
1 decade ago Jan 21, 2011 11:23am

Hi Guys

Maybe all of you already know that animating things on a page is absolutly easy with CSS3.
There is no extra javascript needed. It all about css and setting class names to elements.
Maybe IE is not supporting css3 right now but it will come soon.

Setting css class names to vaadin controls is easy so vaadin already supports the full set of
css3 animations. For now i see only one thing is missing. If i like to use a translation as transition
between two requests producing a new layout(maybe like switching screens on an iphone)
then i need to set the animation classname to the current layout and then request the server for the new layout asynchronous. Something like a clientside class callback when button clicked or so.
Yes, i think css3 will be very cool and the way to get animation to webapps.

//example for webkit browsers

@-webkit-keyframes nonsense {
	0% {
		left: 0px;
		opacity: .4;
		width: 100%;
		
	}
	50% { 
		 -webkit-transform: rotate(180deg);
		opacity: .8;
		
	}
	80% {
		 -webkit-transform: rotate(360deg);
		left: 200px;
		opacity: 1;
		width: 50%;
	}
	100% {
		-webkit-transform-origin-z:100%;
		left: 0px;
		opacity: .4;
		width: 100%;
		
	}
}
.animate-out {
	-webkit-animation-name: nonsense;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;   
    -webkit-animation-timing-function: ease-out; 
	-webkit-animation-fill-mode:forwards;
	position: relative;
	left: 0px;
}
Mukesh Verma
7 years ago Jul 03, 2015 8:32am
Mukesh Verma
7 years ago Jul 03, 2015 9:34am
Marius Reinwald
7 years ago Jul 03, 2015 11:03am

Why do you not just add the StyleName to multiple images or did I misinterpret your problem?

Mukesh Verma
7 years ago Jul 03, 2015 12:58pm
Marius Reinwald
7 years ago Jul 06, 2015 6:39am

Well first things first:
As slide1, slide2 and slide 3 are defined the exact same you could use setStyleName("slide1") to get the same effect.
Secondly:
All 3 styles have the same fixed position which probably causes your images to overlay each other. You would have to define different top and left for them if that's the case.
Is that your problem or did i misunderstood your problem?
 

Mukesh Verma
7 years ago Jul 08, 2015 6:25am
Marius Reinwald
7 years ago Jul 08, 2015 7:18am

I think i got what you want now:
You need to define a delay in your animations. So the animation part of your styles would be kind of like:

.slide1{
        @include animation(valo-animate-in-slide-left 4s 0s infinite);
        ...
    }
    .slide2{
        @include animation(valo-animate-in-slide-left 4s 1s infinite);
        ...
    }
    .slide3{
        @include animation(valo-animate-in-slide-left 4s 2s infinite);
        ...
    }

... being all your other position, left, .... stuff.
These styles will image1 immediately, image2 after a 1 second delay and image 3 after a 2s delay. You can adjust the times however you want.

Mukesh Verma
7 years ago Jul 08, 2015 9:44am
Marius Reinwald
7 years ago Jul 08, 2015 2:03pm

Okay I'm gonna be honest: I don't really know what kind of animation you're trying to achieve because what your styles are doing is letting 2 and 3 wait until the previous finished its animation once and then they do the same thing without any delay between them. This causes all of them to be on top.
Could you elaborate what exact motion you want?

Mukesh Verma
7 years ago Jul 09, 2015 8:07am
Marius Reinwald
7 years ago Jul 09, 2015 9:17am

That cleared things up. So you want an image carousel.
If you don't want to make a custom one but rather rely on an add-on there is the Carousel Add-On .
If you want  to make it yourself and a bit more lightweight you could just use the code from codepen and use a CustomLayout to integrate it in Vaadin.
(replace mytheme with your theme name in following explanation)
create a html file in mytheme/layouts, like f.e. imageslider.html

<div class="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</<figure>
</div>

add the css and the keyframes to the mytheme.scss. (The following is the complete scss file for my test project you just need to add the keyframes before your mixin and the styles inside your mixin)

@import "../valo/valo.scss";


@keyframes slidy {
        0% {
        left: 0%;
    }
        20% {
        left: 0%;
    }
        25% {
        left: -100%;
    }
        45% {
        left: -100%;
    }
        50% {
        left: -200%;
    }
        70% {
        left: -200%;
    }
        75% {
        left: -300%;
    }
        95% {
        left: -300%;
    }
        100% {
        left: -400%;
    }
}


@-webkit-keyframes slidy {
        0% {
        left: 0%;
    }
        20% {
        left: 0%;
    }
        25% {
        left: -100%;
    }
        45% {
        left: -100%;
    }
        50% {
        left: -200%;
    }
        70% {
        left: -200%;
    }
        75% {
        left: -300%;
    }
        95% {
        left: -300%;
    }
        100% {
        left: -400%;
    }
}


@mixin mytheme {
  @include valo;

.slider { overflow: hidden; }
.slider figure img { width: 20%; float: left; }
.slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  @include animation(slidy 30s 0s infinite);
}
 
 
}

Then just use it like:

CustomLayout imgslider = new CustomLayout("imageslider");
imgslider.setSizeFull();
layout.addComponent(imgslider);

Also look up CustomLayout to get more information about it.

 

Mukesh Verma
7 years ago Jul 09, 2015 1:24pm