[SOLVED] When using self.$setState on Ajax success, is it possible to add to the content some sort of animation?

1

I mean after the Ajax success and using self.$setState to refresh the content of the page, is it possible to add to this content some soft of animation to appear nicely? …

I like the animista http://animista.net for many effects… to consider…

any ideas?

2

you mean like a preloader?

https://framework7.io/docs/preloader.html

Or you can make a div with full screen size, and add your content there, then just show and hide it as you need

<div class='animation-container'>
  <div class='animation></div>
</div>

.animation-container {
position: absolute;
top: 0;
left:0;
width: 100vw;
heigth: 100vh;
display: none;
}
.animation-container .show{
display: block;
}

the code is just as an example.

1 Like
3

it is not a preloader itself…

I have already a preloader for that that it is replaced with the content once it is loaded.

it is after the content it is loaded I want to be able to show that content with a nice animation effect…

is it possible to add this using only css?

check I like the animista http://animista.net for many effects… to consider…

4

i know animista.net. just add the class you need to your content.

1 Like
5

In my case it does not work the animation when using self.$setState on Ajax success it works only when content already exists on that page…

that is my case maybe doing something wrong…

6

ok, it works for me
jsfiddle

just click Test and the list will appear with a real json request and after load an animation from animista is applied

1 Like
7

It worked fine thanks!!! patty I cannot apply some animations to page transitions as I wanted!!! but It works for some blocks!! and makes things look more interesting… :slight_smile: