Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use transitions for 🙀

This commit is contained in:
Sébastien Chopin 2017-07-09 02:35:07 +02:00
parent 272ae52c73
commit 505aed4575
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/dynamic-components/pages/index.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<h1>Nuxt Chat</h1>
<ul>
<li v-for="message in messages">
<transition-group name="list" tag="ul">
<li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"></component>
</li>
</ul>
</transition-group>
</div>
</template>
@ -58,5 +58,13 @@ ul li {
background: white;
border: 1px #ddd solid;
overflow: hidden;
opacity: 1;
}
.list-enter-active, .list-leave-active {
transition: all 0.4s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(20px);
}
</style>