Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition name is not applied if the route has never been changed. #38

Open
R-N opened this issue Sep 21, 2020 · 0 comments · May be fixed by #51
Open

Transition name is not applied if the route has never been changed. #38

R-N opened this issue Sep 21, 2020 · 0 comments · May be fixed by #51

Comments

@R-N
Copy link

R-N commented Sep 21, 2020

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'.

The extending component I mentioned
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant