From 07d499153434cde31b49a125bf10a96c8696a0a5 Mon Sep 17 00:00:00 2001 From: Henry Tabima Giraldo Date: Wed, 17 Oct 2018 16:06:04 -0500 Subject: [PATCH] Update transition.md add a note that alert of adding again the key transitions, and add an example of route transition usage --- source/components/transition.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/source/components/transition.md b/source/components/transition.md index c7c681db..89e1fbf7 100644 --- a/source/components/transition.md +++ b/source/components/transition.md @@ -20,6 +20,7 @@ animations: [ 'bounceOutRight' ] ``` +Note: `/quasar.conf.js` already had defined `animations: []`, look for it and modify it as you want instead of adding it again If you are building a website, you can also skip configuring quasar.conf.js and use a CDN link which points to Animate.css like this (following is just an example, Google for latest link). Remember this will require an Internet connection for your user, as opposed to bundling from within quasar.conf.js. @@ -82,3 +83,18 @@ Please note some things in the above example: 2. The components and DOM elements must be keyed, like `key="text"` or `key="email-button"` in the example above. 3. Both examples above have the Boolean property `appear` specified, which makes the entering animation kick in right after component(s) have been rendered. This property is optional. +### Adding Route Transition +To animate routes changes, is necessary to add the property `mode="out-in"`. + +```html + + + + +``` +