Zulko / eagle.js

A hackable slideshow framework built with Vue.js
https://zulko.github.io/eaglejs-demo/
ISC License
4.08k stars 221 forks source link

Allow for custom next and previous slide transitions. #10

Closed elpete closed 7 years ago

elpete commented 7 years ago

Using the enterNext, enterPrev, leaveNext and leavePrev props, you can specify a different transition for next and previous directions.

If these props are not specified, the value of enter or leave is used.

elpete commented 7 years ago

Here's a animated gif example:

eaglejs-custom-next-and-prev-transitions

elpete commented 7 years ago

And the code for it:

.eg-theme-spacegray
  .eg-slideshow
    slide(enterNext="slideInRight" enterPrev="slideInLeft" leave="bounceOutLeft" leavePrev="bounceOutRight")
      .center
        h1 Making Modules
        h4 A Slideshow Framework for Vue.js

    slide(enterNext="slideInRight" enterPrev="slideInLeft" leaveNext="bounceOutLeft" leavePrev="bounceOutRight")
      h1 Testing
      eg-code-block(lang="js").
        component name="Exhibit" {
          property name="id";
        }
Zulko commented 7 years ago

Thanks !