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/
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>
is it possible to have a highlight colour for the selected item of an Expansion Item ?
<q-expansion-item
expand-separator
v-for="(menu, index) in menus"
:style="index === 0 && 'margin-top: 20px'"
:icon="menu.icon"
:label="menu.title"
:key="menu.id"
:expand-icon="menu.subMenus.length === 0 && 'none'"
>
<q-expansion-item
v-for="(sub, index) in menu.subMenus"
:label="sub"
expand-icon="none"
class="sub-content"
/>
</q-expansion-item>
Yes, you can.
Since quasar provides styled wrappers over HTML DOM elements, custom CSS can be applied to the class which can be found out by inspecting in chrome dev tools.
In your case, the class name is: .q-expansion-item--expanded
Add this to component CSS:
.q-expansion-item--expanded {
border:1px solid #000000;
border-color: cyan;
background-color: cyan;
}
This will add these properties when the item is expanded.
There are a few other ways to solve this as well using JS.
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 beginner for Vue, and I trying make carousel via Vue.
I have the code: https://jsfiddle.net/z3m76w5r/4/ (example)
<style>
.switch-enter-active,
.switch-leave-active {
transition: all .5s ease-in-out;
}
.switch-enter {
left: 100%;
}
.switch-leave,
.switch-leave-to {
left: -100%;
}
</style>
<div id="banner">
<transition name="switch">
<banner class="content" v-bind:slide="currentSlide"></banner>
</transition>
<div>
I want animated my carousel. But my transition-vue don't work, despite I looked at the docs and manuals.
Reason why your transition using Vue build-in <transition> component doesn't work is because its designed to work when some element/component is entering or leaving the DOM in context of:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
Your image element is not entering or leaving DOM. Its just there and you are changing it's attributes (like url etc. - which cannot be animated in any way).
For your transition to work you need at least 2 img tags to exist in the DOM during the transition - one that is leaving the DOM and one that is entering the DOM. Easiest way to do this is by using v-for with key and transition-group instead of just transition. You just change the index of image, v-for will create new img element, apply "enter" transition to it and "leave" transition to old img element (for previous index)
You can find great example of that here
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