Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-27 08:02:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use transitions for 🙀

Browse Source
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> <template>
<div> <div>
<h1>Nuxt Chat</h1> <h1>Nuxt Chat</h1>
<ul> <transition-group name="list" tag="ul">
<li v-for="message in messages"> <li v-for="(message, index) in messages" :key="index">
<component :is="message.component" :data="message.data"></component> <component :is="message.component" :data="message.data"></component>
</li> </li>
</ul> </transition-group>
</div> </div>
</template> </template>
@ -58,5 +58,13 @@ ul li {
background: white; background: white;
border: 1px #ddd solid; border: 1px #ddd solid;
overflow: hidden; 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> </style>