0

I'am using blivesta animsition to add a page transition. But the thing is that I have a link transition at the moment, can anyone help me to create a page transition instead of a link transition. I can't figure it out how.

<div
class="animsition"
data-animsition-in-class="fade-in-up"
data-animsition-in-duration="1000"
data-animsition-out-class="fade-out-up"
data-animsition-out-duration="800"
>
<a href="menu.html">Volgende</a>
</div>

http://codepen.io/melissabos18/pen/eJJdZm?editors=101

John Slegers
  • 38,420
  • 17
  • 182
  • 152
Melissa
  • 3
  • 2
  • Please add a [minimal, complete and verifiable example](http://stackoverflow.com/help/mcve) example to your question, so it's easier for others to identify and solve your issue. For example, you could provide an example using [JSFiddle](http://jsfiddle.net/). – Gerrit Bertier Dec 15 '15 at 12:19
  • http://codepen.io/melissabos18/pen/eJJdZm?editors=101 – Melissa Dec 15 '15 at 12:24
  • Hey, your pen contains errors in the JavaScript panel. – Gerrit Bertier Dec 15 '15 at 12:32

1 Answers1

0

Add a class animsition-link to the link.

CodePen example: http://codepen.io/grrtbrtr/pen/addmyB

HTML:

<div class="container animsition" data-animsition-in-class="fade-in-up" data-animsition-in-duration="1000" data-animsition-out-class="fade-out-up" data-animsition-out-duration="800">
  <div class="test">
    <a href="#" class="animsition-link">volgende</a>
  </div>
</div>
Gerrit Bertier
  • 3,227
  • 1
  • 16
  • 27
  • But am i using blivesta animsition now? I think something is wrong in the html because i have a transition but it is a link transition and i want a page transition – Melissa Dec 15 '15 at 12:57
  • Does the Fiddle I provided (http://codepen.io/grrtbrtr/pen/addmyB) act like you want it? – Gerrit Bertier Dec 15 '15 at 13:15
  • http://git.blivesta.com/animsition/fade-up/ i would like to have a page transition like this. But the problem is that the transition is on the link and not on the page – Melissa Dec 15 '15 at 13:18
  • Hey, please see http://codepen.io/grrtbrtr/pen/addmyB, it mimics the behaviour you want. When clicking the link, the `.container` element moves up. – Gerrit Bertier Dec 15 '15 at 13:28
  • ok thanx, is there also an option get fade the other "#" page in? – Melissa Dec 15 '15 at 13:33
  • Thanx, it's done..... simple copy paste the code to menu.html – Melissa Dec 15 '15 at 13:43
  • Add `class="animsition" data-animsition-in-class="fade-in-up" data-animsition-in-duration="1000"` to the container element on the other page and initiate animsition there as well... – Gerrit Bertier Dec 15 '15 at 13:43