当前位置:首页 > 资讯 > info5 > 正文

vue中的渐进过渡

发表于: 2016-04-30   作者:u013742084   来源:转载   浏览:
摘要: transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger: 或者,提供一个钩子 stagger, enter-stagger 或 leave-stagger,以更好的控制:Vue.transition('stagger',{ stagger:function(index){ //每个过渡项目增

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger,enter-stagger 或 leave-stagger

<div v-for="item in list" transition="stagger" stagger="100"></div>

或者,提供一个钩子 staggerenter-stagger 或 leave-stagger,以更好的控制:

Vue.transition('stagger', {
  stagger: function (index) {
    // 每个过渡项目增加 50ms 延时
    // 但是最大延时限制为 300ms
    return Math.min(300, index * 50)
  }
})
示例: html代码:

<div id="demo">
    <input v-model="query">
    <ul>
        <li v-for="item in list | filterBy query"
            transition="staggered"
            stagger="100">
          {{item.msg}}
         </li>
    </ul>
</div>
js代码:
new Vue({
    el: '#demo',
    data: {
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    }
})
css代码:
ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}
效果如下图: vue中的渐进过渡_第1张图片

vue中的渐进过渡

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?
第一个收获:网页适应设备的宽度,使网页占满整个设备宽度 <meta name="viewport" content="widt
环境Unity3D 4.6.2f1 Win7 64bit 同事从Maya中用blendshape方式做了一个动画,一个球匀速向前移动一
Θ符号 Θ(g(n))={f(n):对于存在正常数c1、c2和非负的整数n0,以及足够大的n,对于所有的n≥n0来
先看Modal.vue代码 <template> <div draggable="true" class="modal" v-bind:style="{ 'wi
vueJS的源码解读 vue源码总共包含约一万行代码量(包括注释)特别感谢作者Evan You开放的源代码,访
一般看影片的小伙伴应该都会发现视频中某镜头与某镜头之间的过渡是一片黑色画面,持续时间也不长,
  一般看影片的小伙伴应该都会发现视频中某镜头与某镜头之间的过渡是一片黑色画面,持续时间也不
  一般看影片的小伙伴应该都会发现视频中某镜头与某镜头之间的过渡是一片黑色画面,持续时间也不
一、先创建一张mongo表,右击已创建的数据库test,点击addcollection.. 输入Collection Name,点击o
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号