With Vue.js, when I delete a reply, I use a "transition-group" to fadeout the reply.
However, if I'm changing the reply page, I also see the fadeout.
How can I disable the fadeout of replies when I change the replies page ?
<transition-group name="list" tag="div">
<div v-for="(reply, index) in items" :key="reply.id">
<reply :data="reply" #deleted="remove(index)"></reply>
</div>
</transition-group>
<paginator :dataSet="dataSet" #updated="fetch"></paginator>
css :
.list-enter, .list-leave-to {
transition: all 0.5s;
opacity: 0;
}
Make the <transition-group> name="list" a property that reacts to data with :name="animToUse"
Put animToUse as a property on data
Change animToUse to a non transition whenever you don't want the transition
If you are using vue-router see it's docs about transitions: Route-Based Dynamic Transition
Related
I have this Vue transition-group below. It works properly, but the problem is, when any element in the loop updates (hash changes, which is used for key), the transition group triggers the animation for that updated element (every time it updates).
I need it to only animate the elements once, when they are added to the items array (the elements are added with items.unshift(newItem))
<transition name="notification-transition">
<custom-component
v-for="item in items"
:key="'item-' + item.hash"
></custom-component>
</transition>
.notification-transition-enter-active {
transition: all 0.5s ease;
}
.notification-transition-leave-active {
transition: all 0s ease;
}
.notification-transition-enter,
.notification-transition-leave-to {
opacity: 0;
transform: translateX(256px);
}
Vue docs mention that it runs "when items are inserted, updated, or removed from the DOM" but doesn't say anything about how to limit it to just the inserted and removed event.
I found the problem. It re-triggers transition because the property item.hash, which is used for key, changes. I have to use some static key property, that doesn't change
<transition name="notification-transition">
<custom-component
v-for="item in items"
:key="'item-' + item.staticHash"
></custom-component>
</transition>
I am trying to apply a very simple transition to div within in a Vue component. The element is not dependent on state or anything -- it just needs to slide in from the right when the component displays. For some reason, the transition I've set up is not working.
The component appears on my page as:
<MenuSideBar v-if="displayMenu" slide-right :items="menuItems />
And within that component, I have:
<template>
<transition name="slide">
<div v-if="slideRight" class="menu-container">
<div class="menu-inner">
<Menu :items="items />
</div>
</div>
</transition>
</template>
In my CSS for the transitions, I have:
.menu-container {
left: 0;
position: absolute;
top: 0;
width: 25vw;
}
.slide-enter{
right: -1000px;
}
.slide-enter-active {
transition: right 0.5s ease;
}
.slide-enter-to{
right: 0;
}
But when this component is displayed, there is no sliding in transition on that element.
Can anyone offer any advice on what I'm doing wrong?
For the sake of completeness, I'm posting my comment as the answer.
It seems like you want the transition to happen when the element is first rendered. To achieve that, you will need to add the appear attribute:
<template>
<transition name="slide" appear>
<div v-if="slideRight" class="menu-container">
<div class="menu-inner">
<Menu :items="items />
</div>
</div>
</transition>
</template>
I have this.
<template>
<md-dialog :md-active.sync="show"
#md-closed="hideModal"
#md-clicked-outside="hideModal"
class="modal-tabs"
#keypress.enter.prevent="handleEnter"
>
<md-dialog-content ref="my-modal" v-on:scroll.native="handleScrolling" #click.native="handleScrolling">
<!--content-->
</md-dialog-content>
</md-dialog>
</template>
and handler function is
handleScrolling(): void {
console.log('scroll is on');
this.$root.$emit('scrollingModal', this.$refs['my-modal'].$el.scrollTop);
}
It easily called by clicking on content but cannot be called by scrolling content. Why? Regards.
In order for v-on:scroll to be triggered the element first needs to by overflowing with a scroll style declared.
Try doing this:
<div style="max-height: 300px; overflow: scroll;" v-on:scroll="handleScrolling()">
<md-dialog-content ref="my-modal" #click.native="handleScrolling">
<!--content-->
</md-dialog-content>
</div>
This should show you a proof of concept. As you scroll inside that div you should see the messages being logged.
This problem solved by wrapping content with md-tabs and md-tab tags. In my case, to achieve scroll event triggering i have changed code above to:
<template>
<md-dialog :md-active.sync="show"
#md-closed="hideModal"
#md-clicked-outside="hideModal"
class="modal-tabs"
#keypress.enter.prevent="handleEnter"
>
<md-dialog-content ref="edit-contact-modal" v-on:scroll.native="handleScrolling">
<md-tabs>
<md-tab><!--here md-tab in fact is first custom div of mine-->
<!--content-->
</md-tab>
</md-tabs>
</md-dialog-content>
</md-dialog>
</template>
I am having trouble animating the menu component, which is expected to slide in and out on click, while the background fades in and out. I have in and out classes, depending on a 'showMenu' Boolean. In the sandbox, the menu flies in and out instantly when I click the Vue logo, but in my local version, everything works when they slide/fade in, but nothing happens when the menu closes. I am using the Bootstrap modal for this.
https://codesandbox.io/s/nk2xnz2wp0
As another user said, vue transitions are designed for this. You're code appeared to be overly complicated, I would advise against passing a function as a property. Vue has very good documentation about communication between child and parent components, I think maybe this is where your issues were arising from. I have modified your code to include a very basic vue transition and the menu now fades in and out, see https://codesandbox.io/s/0m13wz25pl?fontsize=14.
For possible future readers, the main code involved is:
<template>
<transition name="fade">
<HelloWorld v-on:click="showMenu = !showMenu;" v-if="showMenu" />
</transition>
</tempalte>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
Inside App I made a separate div for the background and did a separate Vue transition for menu and the background div like so:
<transition name="slide-menu" mode="in-out">
<MenuDrawer v-if="showMenu" :toggleMenu="toggleMenu" />
</transition>
<transition name="fade" mode="in-out">
<div class="darkBg" v-if="showMenu"></div>
</transition>
It definitely feels dirty, and I hope someone can show me a better solution.
I have an animation that works on other components but does not work with this one. I tried <transition-group> with no luck as well. The row simply disappears without any animation.
<transition name="card-animation">
<tr is="employee-row"
v-for="employee in employees"
:employee="employee"
:selectedOffice='selectedOffice'
:new_hire_location_options="new_hire_location_options"
v-on:fire='fireEmployee(employee)'
v-if="(employee.location.name == selectedOffice || selectedOffice == 'show all')">
</tr>
</transition>
Here's the CSS
.card-animation-enter-active, .card-animation-leave-active {
transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
.card-animation-enter, .card-animation-leave-to {
transform: scale(0);
opacity: 0;
}
What is wrong with my code?
You need to use transition-group to work with v-for. If you are using a string template, you also need the tag="tbody" attribute.
If you are using a DOM template, you need to use <tbody name="card-animation" is="transition-group">. Reference: https://github.com/vuejs/vue/issues/3907
example:
https://jsfiddle.net/2LLkene5/