I have a spa vue page with vuetify, and when I change between the components of the aplication I want the component shows with a transition.
I tried with the <v-slide-y-transition> tag and the transition="slide-y-transition attribute but nothing works. Here some examples of what I tried:
Example with the "vuetify tag":
<template>
<v-app>
<v-slide-y-transition>
<h1>Test</h1>
</v-slide-y-transition>
</v-app>
</template>
Example with the attribute:
<template>
<v-app>
<div transition="slide-y-transition">
<h1>Test</h1>
</div>
</v-app>
</template>
The Vuetify transitions as you have them only work on the Vuetify library components. e.g. <v-menu transition="slide-x-transition"> where v-menu is one of the components. You can't use the transitions that way on a simple <div>.
However, Vue.js itself supports transitions using the following format.
<transition name="slide">
<div> element you are apply the transition to</div>
</transition>
You will have to define the css for the transition as per the documentation here. or you can use a css library like Animate.css
Example css from documentation:
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
In case someone needs to know how to use VuetifyJS transitions with router-view which I understood by page transitions.
Vuetify router-view Transitions
Vue2 / Vuetify2
Here you can use the Vuetify transitions directly
<v-main>
<v-container fill-height>
<v-slide-x-transition mode="out-in">
<router-view />
</v-slide-x-transition>
</v-container>
</v-main>
Vue3 / Vuetify3
In Vue3 / Vuetify3 this is unfortunately no longer directly usable due to the changes in the router-view API. But of course you can pick the values of the Vuetify transitions on Github and recreate them accordingly.
<template>
<v-main>
<v-container fill-height>
<router-view v-slot="{ Component, route }">
<transition name="slide-x" mode="out-in">
<component :is="Component" :key="route.path" />
</transition>
</router-view>
</v-container>
</v-main>
</template>
<style>
/* v-slide-x-transition look a like */
.slide-x-enter-active,
.slide-x-leave-active {
transition: transform .6s cubic-bezier(0.25, 0.8, 0.5, 1), opacity .8s;
opacity: 1;
}
.slide-x-enter-from,
.slide-x-leave-to {
opacity: 0;
}
.slide-x-enter-from {
transform: translateX(100px);
}
.slide-x-leave-to {
transform: translateX(-100px);
}
</style>
You can use Vuejs transition For changing components instead of vuetify transitions look at the following example:
<transition name="slide-in-down" appear appear-active-class="animated slideInDown">
<div> element you are apply the transition to</div>
</transition>
Related
I'm using vue 3 with vue router, and I used the same code from the docs for transitioning the route, and it worked at first, but after some changes in the code in other files, it decided not to work ;-;
Here is my app.vue
<template>
<Nav />
<router-view v-slot="{ Component }">
<transition name="Fade">
<div>
<component :is="Component" />
</div>
</transition>
</router-view>
</template>
<script>
import Nav from "#/components/Nav.vue";
export default {
name: "HomeView",
components: {
Nav,
},
};
</script>
<style scoped>
.Fade-enter-from,
.Fade-leave-to {
opacity: 0;
transform: translateX(120px);
}
.Fade-enter-active,
.Fade-leave-active {
transition: all 0.5s ease-in;
}
</style>
and here's the Main Route
<template>
<div>
<WText />
<Softwares />
</div>
</template>
<script>
import WText from "#/components/WText.vue";
import Softwares from "#/components/Softwares.vue";
export default {
components: {
WText,
Softwares,
},
};
</script>
The other route (contact) is just an empty vue file, nothing special.
transition tag works when inner content re-renders (which could mean Component variable change, setting v-if="true" to v-if="false" and viceversa.), wrapping <component> tag with div will keep a constant dom element existing. Getting rid of wrapper div (or force rerender when Component variable changes which is not a good way to do it.)
I have problem with implementing transitions route when page is changed. Am using VUE 3 and have implemented Single Page App.
When am on Home page that not work.
When i change page to AboutUs and refresh transitions work.
When i go to Contact page from About us work.
When i back from contact to Home not work.
When am on home and do refresh not work.
So on all work except on '/' homepage.
I implement it in Root Component
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
style.css
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
Here is full code:
<script>
import HeaderTop from './pages/partials/header_top.vue'
import HeaderMiddle from './pages/partials/header_middle.vue'
import MainNavbar from './pages/partials/main_navbar.vue'
import MainFooter from './pages/partials/footer.vue'
export default {
components: {
HeaderTop,
HeaderMiddle,
MainNavbar,
MainFooter
}
}
</script>
<template>
<!-- Header start -->
<header class="header_wrap">
<div class="header-top">
<HeaderTop></HeaderTop>
</div>
<div class="header-middle">
<HeaderMiddle></HeaderMiddle>
</div>
<div class="header-bottom">
<MainNavbar></MainNavbar>
</div>
</header>
<!-- Header end -->
<!-- Content start -->
<main role="main">
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</main>
<!-- Content end -->
<!-- Footer start -->
<footer id="main-footer">
<MainFooter></MainFooter>
</footer>
<!-- Footer end -->
</template>
I am trying to change the class to apply on a Vuetify.js component based on whether there is a mouse hover or not:
<v-card
class="mx-auto"
width="344"
>
<v-hover>
<v-card-title
slot-scope="hover"
:class="`${hover? class1: class2}`">
<div>
<span class="headline">Hover</span>
</div>
</div>
</v-card-title>
</v-hover>
</v-card>
The CSS classes simply set the background-color property:
.class1 {
background-color:red;
}
.class2 {
background-color:blue;
}
For some reason, this is not working. What am I missing?
Codepen.
You miss quotes in your prop class binding and curly braces in your slot-scope prop.
It should be defined like this :
slot-scope="{ hover }"
:class="`${hover? 'class1': 'class2'}`">
Working CodePen
Vuetify Hover Doc
I'm trying to code simple slide panel, like here http://anton.shevchuk.name/wp-demo/jquery-tutorials/simple-slide-panel.html
but on Vue.js. But panel doesn't slide it's wait 2 seconds then close without animation.
https://codepen.io/TogusaRusso/pen/dqoMLr
If I remove v-if, I can animate it, changing height of div.
https://codepen.io/TogusaRusso/pen/mGJEEJ
How can I animate removing of div?
<template>
<v-flex xs12 sm6 offset-sm3>
<transition name="slide" :duration="2000">
<div
class="slide-media"
:style="{height: '400px'}"
v-if="isOpen"
>Hello!</div>
</transition>
<v-btn
flat color="orange"
#click="isOpen=!isOpen"
>
{{isOpen?"Close":"Open"}}
</v-btn>
</v-flex>
</template>
<script>
export default {
name: 'SlidePanel',
data() {
return {
isOpen: false,
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.slide-media {
background-color: orangered;
overflow-y:hidden;
}
.slide-enter-active, .slide-leave-active {
transition: height 2s;
}
.slide-enter, .slide-leave-to {
height: 0px;
}
</style>
Check MDN: Css Specificity,
Inline styles added to an element (e.g., style="font-weight:bold")
always overwrite any styles in external stylesheets, and thus can be
thought of as having the highest specificity.
So removed the inline styles :style="{height: '400px'}", then add height:400px; inside .slide-media.
Below is one demo:
new Vue({
el: '#app',
data(){
return {
isOpen: false
}
},
methods: {
togglePanel: function () {
this.isOpen = !this.isOpen
}
}
})
.slide-media {
background-color: orangered;
overflow-y:hidden;
height:400px;
}
.slide-enter-active, .slide-leave-active {
transition: height 2s;
}
.slide-enter, .slide-leave-to {
height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button #click="togglePanel()">Toggle Panel</button>
<transition name="slide" :duration="2000">
<div
class="slide-media"
v-if="isOpen"
>Hello!</div>
</transition>
</div>
I'm facing an odd behaviour with transition-group.
I have this css transition:
.slide-fade-pop-enter-active {
transition: all .4s ease-out;
}
.slide-fade-pop-enter {
background-color: $color-yellow-light;
transform: translateY(3px);
opacity: 0;
}
And I have a Cart component and CartItem subcomponents.
Inside the Cart I have CartItems like so:
<transition-group name="slide-fade-pop" tag="ul" class="cart__content">
<cart-item v-for="(item, index) in items"
:key="index">
</cart-item>
</transition-group>
This is triggering initial rendering animation, even though, as you see, I'm not using the "appear" attribute/prop which, as documented, triggers initial rendering animation.
When I switch the CartItem component for a simple li (which, in fact is the CartItem), like so:
<transition-group name="slide-fade-pop" tag="ul" class="cart__content">
<li v-for="(item, index) in items"
:key="index">
</li>
</transition-group>
The transition behaves as intended. No initial render, subsequent additions to list are animated.
Is this a bug or a feature and I'm missing something on my subcomponent?