Hint: https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

I'm working on a project with Vue3 (+Router 4 + Quasar 2) and tried to use this library and get the error

I guess it is because the library doesn't support Vue3.
If it's correct, please upgrade it.

Thanks a lot

I have integrated this package in my simple project. For chrome, works well. but does not work in IE 11. I have got following error.
SCRIPT1003**: Excepted ':'** vue-page-transition.common.js (91, 1)
Please help me. Regards

Only version 0.2.2 is available on the NPM registry.

It seems that I can't use the transition element on anything else within the vue-page-transition element, which I have around my router-view at the root of my app.

Is this something you are aware of or am I making a mistake?

Hi, I'd love to contribute to this project. What do I need to know?
Great work btw :)

Hi, in your demo (and in my project) i had an overflow effect with fade-right

To fix that,I just need to add
css:

#app {
  overflow-x: hidden;
}

html:

<div id="app">
   <vue-page-transition name="fade-in-right">
     <router-view class="auto-size" />
   </vue-page-transition>
 </div>

Thanks for your work

Getting a PostCSS warning after adding this module (and using it): "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing."

From reading about it, it seems the cause is the imports within the SCSS style block in the component that's being imported. Any chance you could provide an option to import a version of the component without scss in it?

EDIT: Thinking about it more it seems like a lame request. It's not your fault the interaction is faulty and your component is beautifully written. I'll try to work around it.

The demo should be much cleaner.

• better demo content
• intro page with links
• etc.

First of all, I know that this plugin is meant to be used with the router-view, but a page doesn't necessarily mean a route to me. I have some special pages that I display with v-if on special cases, one of them is a login page. It is a page because covers the entire window page and hides everything else (because v-else). It appears first and only gets hidden on login.

If you want to dismiss this because it's not the intended use case, it's fine, I can still extend the component. Although, the issue and the fix are simple and shouldn't break stuff, maybe.

Now, for the issue; the name prop is not applied if the route has never been changed yet, because it only applies that on beforeEach route change. The plugin defaults to fade transition and will only apply the transition in name prop after a route change.

The fix is simple; set transition from name prop on created.

I'd also like to add that while 'fade' is the default value for transition, it is not the default value for the name prop. So, maybe you also want to set name prop default value to 'fade'.

<script>
import VuePageTransition from 'vue-page-transition/src/components/VuePageTransition';

const MyPageTransition = {
    name: "MyPageTransition",
    extends: VuePageTransition,
    created(){
        this.transition = this.$props.name;
    }
}
export { MyPageTransition }
export default MyPageTransition
</script>

would be nice with a randomizer function which baseicly randomizes the effect of predefined values.

<page-transition name="randomize" :names="["fade","flip"]>

Maybe add _variables scss files that you can override? to change the defaults of the duration, maybe postcss? to solve it? but the feature would be nice.

When I try to import vue-page-transition in TypeScript I'm getting this error : Could not find a declaration file for module 'vue-page-transition'. '/project/node_modules/vue-page-transition/dist/vue-page-transition.common.js' implicitly has an 'any' type

Every time a page is loaded I get this message:

[Vue warn]: Property or method "loading" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Vuex> at src/components/vuex.vue
       <VuePageTransition> at /Users/orlando/Desktop/contributions/vue-page-transitions/src/components/VuePageTransition.vue
         <VContent>
           <VApp>
             <App> at src/App.vue
               <Root>
warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620
warnNonPresent @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2014
get @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2069
render
Vue._render @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3536
updateComponent @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4054
get @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4467
run @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4542
flushSchedulerQueue @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4298
(anonymous) @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1979
flushCallbacks @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1905

Not a big issue but it makes debugging difficult as I get 40 errors like this every time a page is loaded.

How hard would it be to spruce up the overlays? Soild colors are a bit boring... Slap some images on the overlays or even a slot to put what ever you want! Now we are talking! Great plugin though! Just currently switch to it.

I'm trying to use a transition other than the default fade. When passing a name it does not change anything.

// in main.js
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition);

// in App.vue
<vue-page-transition name="overlay-left-full">

Hello and thank you for your work here.

Would like to know if I can change the color on the overlay transition - Blue is not in my color scheme.

Perhaps use the following to allow users to hook into the transition lifecycle:

<transition v-bind="[$attrs, $props]" v-on="$listeners">

New URL should be: https://orlandster.github.io/vue-page-transition/#/

From the docs, it seems you cannot change the time of the transition. It;d be nice if I can change it to the timing I want.