<transition-group name="slide">
<section-tree v-for="(section,index) in form.sections" :key="section.random"
:index = "index"
:section = "section"
#selectedSectionAndLesson="selectedSectionAndLesson"
>
</section-tree>
</transition-group>
Transition working fine in above.
Inside Section tree component there is a lesson tree component.
<template>
<ul class="iw-sider-card-wrap">
<div class="iw-sider-card-header">
<a class="card-title"> Course Builder</a>
</div>
<transition-group name="slide">
<lesson-tree v-for="(lesson,index) in lessons" :key="lesson.random"
:index = "index"
#selectedSectionAndLesson="selectedSectionAndLesson"
>
</lesson-tree>
</transition-group>
</ul>
</template>
Random is unique in component. but transition is not working for this component. I am increasing the no of records in sections an lessons array dynamically.
Thanks in Advance.
Did you added some CSS styling too?
This is copied and edited for your case:
.slide-item {
display: inline-block;
margin-right: 10px;
}
.slide-enter-active, .slide-leave-active {
transition: all 1s;
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
Related
the block code what i know how to add transition is
<tbody name="fade" is="transition-group">
<tr class="row" v-bind:key="item.data" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</tbody>
but how about vue-good-table anyone know the tricks to solve ?
in here, i only access the scss and
rowStyleClassFn the callback is set tr class='custom-transition'
<vue-good-table
:row-style-class="rowStyleClassFn" // the callback is set tr class='custom-transition'
...
>
...
// also i have tried with
<template slot="table-row" slot-scope="props">
<transition mode="out-in"> // i added looks like these
....
<span v-else>
<strong>{{ props.formattedRow[props.column.field] }}</strong>
</span>
</transition>
my scss
.yo-good-table::v-deep .vgt-table {
thead {
th {
border: $color-yo-border !important;
}
}
tbody {
tr.custom-transition {
transition: opacity 0.5s ease;
}
tr.custom-transition-active,
tr.custom-transition-leave-active {
transition: opacity 0.5s ease;
}
tr.custom-transition-enter-from,
tr.custom-transition-leave-to {
opacity: 0;
}
}
}
thanks in advance
I have this weird problem where my v-if loop generates a random whitespace in the DOM. I can also visually see it (see image). You see the whitespace to the left of the upload link. The code used to generate the links are pretty simple, but I cannot find out where the whitespace is coming from. Any ideas? Or am I doing something wrong? I tried to reset the cache also to see if that fixed it, but nope.
<template>
<nav class="navbar">
<ul class="nav">
<li class="nav-item nav-brand">
<router-link class="brand nav-link" :to="{ name: 'home' }">{{ this.$appName }}</router-link>
</li>
<template v-for="(link, index) in links">
<li class="nav-item" :key="index">
<router-link class="nav-link" :to="{ name: link.name }">{{ link.title }}</router-link>
</li>
</template>
</ul>
</nav>
</template>
And here is how I use the template:
<AppNavigation :links="[
{ name: 'upload', title: 'Upload' },
{ name: 'login', title: 'Login' }
]" />
<style lang="scss">
// Import variables and mixins
#use '../../scss/vars';
#use '../../scss/mixins';
.navbar {
height:vars.$headerHeight;
.nav {
margin:0;
padding:0;
list-style:none;
height:inherit;
}
.nav-brand {
.brand {
background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%);
background-size:100% 100%;
transition:background-size .25s ease-in-out!important;
&:hover {
background:-moz-linear-gradient(-35deg, #33b2d9 0%, #e368f5 100%)!important;
background-size:100% 200%!important;
}
}
}
.nav-item {
display:inline-flex;
height:inherit;
.nav-link {
height:100%;
display:flex;
align-items:center;
padding:0 20px;
color:vars.$navLinkColor;
font-size:vars.$navLinkSize;
transition:background .05s ease-in-out;
&:hover {
background:lighten(vars.$navItemBg, 5%);
}
}
}
}
</style>
I reproduced the problem by having a predefined <li> element. Then following that, a v-for on a <li> element. Like this:
<li ...>Test</li>
<li v-for="" ...></li>
The whitespace gets added above the v-for.
Solved it by just adding the brand to the list of links to be rendered, and removing the predefined brand element.
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 use vue with Axios to read an RSS feed of book titles and display them in a list. Users have a search box to filter the results in the list. This works fine.
However, the transition does not have any effect.
HTML index file
<ul class="booklist">
<my-book
v-for="book in bookFeed"
v-bind:id="book.id"
v-bind:title="book.node_title"
v-bind:body="book.body"
v-bind:path="book.path"
v-bind:author="book.author"
v-bind:coverimg="book.medium_img" >
</my-book>
</ul>
Vue js file
Vue.component('my-book', {
props: ['title','body','coverimg','id','path','author'],
template: `
<transition name='section'>
<li class="row-animated border-bo-dd mb10 pb10 imgshadow" >
...html content of a single book item
</li>
</transition>
`
});
CSS file
.section-leave-active,
.section-enter-active {
transition: .5s;
}
.section-enter {
transform: translateY(100%);
}
.section-leave-to {
transform: translateY(-100%);
}
Any idea where my mistake is? Thank you for any hint.
rhodes
Try to use transition-group component and place it instead of ul tag like :
<transition-group name="section" tag="ul" class="booklist">
<my-book
v-for="book in bookFeed"
v-bind:id="book.id"
v-bind:title="book.node_title"
v-bind:body="book.body"
v-bind:path="book.path"
v-bind:author="book.author"
v-bind:coverimg="book.medium_img" >
</my-book>
</transition-group>
I'm experimenting with vue for the first time.
I've replaced a jquery show/hide that was using .slideDown() / .slideUp() with v-show - however I much prefer the animation of jQuery's slideup/down. Is there an easy way to do this with vue?
Simplified code here:
<nav class="bg-blue" role="navigation">
<div class="container classes here">
<div class="classes here">
<h1 class="classes here">
<a href="/" class="classes here">Site Name
</a>
</h1>
<button class="classes here" #click="isShowing ^= true">
hamburger svg here
</button>
</div>
<div class="main-nav classes here" v-show="!isShowing">
<div class="classes here">
<!-- nav items here -->
</div>
</div>
</div><!-- /.container -->
</nav>
Please advise.
You can install modules for this, or you can write a custom component. I suggest the second option.
<template>
<div>
<button #click="isShowing">
hamburger svg here
</button>
<!-- animation of appearance/disappearance.
More info: https://v2.vuejs.org/v2/guide/transitions.html -->
<!-- The attribute "name" is used to create custom classes
that are applied during animation -->
<transition name="main-nav"
#enter="transitionStep1"
#after-enter="transitionStep2"
#before-leave="transitionStep3"
#after-leave="transitionStep4">
<div class="main-nav" v-show="!active">
<div class="classes here">Some text</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "Accordion",
data() {
return {
// set the variable that will hide/show the block
active: false
}
},
methods: {
isShowing() {
// change the value of the variable that will hide/show the block
this.active = !this.active;
},
transitionStep1(el) {
// set the block height at the moment of its appearance
el.style.height = el.scrollHeight + 'px'
},
transitionStep2(el) {
// remove inline styles from the block after animation of its appearance
el.style.height = ''
},
transitionStep3(el) {
// set the height of the block at the beginning of its disappearance animation
el.style.height = el.scrollHeight + 'px'
},
transitionStep4(el) {
// remove inline styles from the block after the animation of its disappearance
el.style.height = ''
},
},
}
</script>
<style lang="scss" scoped>
.main-nav {
overflow: hidden;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.main-nav-enter {
height: 0;
}
.main-nav-leave-to {
height: 0 !important;
}
</style>