华山资源网

vue的列表交错过渡实现代码示例
网络编程 2024/11/18 佚名
3 1

交错过渡效果

vue的列表交错过渡实现代码示例

花里胡哨，华而不...真香

基于vue的，需要你对 vue 的 transition 和 transition-group有过使用和了解。

transition

vue的文档对 transtion 组件已经有了很详细的 分析 了。

这里说一下我的理解：

transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。

这个合适的时机是：

  1. beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)
  2. enter dom 插入页面之后的 下一帧(对应下图的动画中)
  3. afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)

vue的列表交错过渡实现代码示例

transition-group

ransition-group组件 会对包裹的列表中每一个元素批量进行 transtion组件 的操作。

html

<div id="app" @click="num === 0 ">
  <transition-group name="list">
    <item v-for="n in num" :key=n />
  </transition-group>
</div>

css

.list-enter {
  opacity: 0;
  transform: translateY(100%);
}
.list-enter-active {
  transition: .3s;
}
/* enter-to其实可以不用写, 没有显性写明，就是默认的opacity: 1;transform: none; */
.list-enter-to {
  opacity: 1;
  transform: translateY(0);
}

vue的列表交错过渡实现代码示例

接下来给 每个列表项 加上不同 延时 即可。

transition-delay

css

.list-enter-active:nth-child(5n+2) {
  transition-delay: .3s;
}
.list-enter-active:nth-child(5n+3) {
  transition-delay: .5s;
}
.list-enter-active:nth-child(5n+4) {
  transition-delay: .7s;
}
.list-enter-active:nth-child(5n+5) {
  transition-delay: .9s;
}

vue的列表交错过渡实现代码示例

用 transition-delay 配合 css选择器，确实可以实现交错过渡，

但是缺点也很明显，要写大量的 css ，修改起来也不灵活。

接下来我们用vue的 JavaScript钩子 来实现。

setTimeout

html

<div id="app" @click="num === 0 ">
  <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测，让我们更好控制 动画完成的时机 -->
  <transition-group 
    v-bind:css="false"
    v-on:before-enter="beforeEnter" 
    v-on:enter="enter"
    v-on:after-enter="afterEnter">

    <item v-for="(n,index) in num" :key=n :data-delay=index*100 />

  </transition-group>
</div>

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

new Vue({
  el: "#app",
  data: () => ({
    num: 0
  }),
  methods: {
    //让我们在 beforeEnter enter afterEnter 钩子里，把 vue 帮我们做的事，自己做一遍:
    //添加移除 class 类名，监听 transitionend 事件。
    beforeEnter(dom) {
      dom.classList.add('list-enter', 'list-enter-active');
    },
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.classList.remove('list-enter');
        dom.classList.add('list-enter-to');
        //监听 transitionend 事件
        var transitionend = window.ontransitionend "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
         dom.removeEventListener(transitionend, onEnd);
         done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
        });
      }, delay)
    },
    afterEnter(dom) {
      dom.classList.remove('list-enter-to', 'list-enter-active');
    }
  }
})

vue的列表交错过渡实现代码示例

目前来说，运行良好，实现了交错过渡的效果，也不用写大量的 css。

回头看看我们一共做了2件事，用 .list-enter .list-enter-to 和 setTimeout

告诉浏览器，在不同的时间把列表项，从opacity 0 translateY(100%) 过渡到，opacity 1 translateY(0)。

告诉浏览器元素的不同状态，除了类名之外，

我们可以直接操作dom，把样式写到内联，

除了完全不用写css类名之外，

还可以有更多的编程性。

style

html

<div id="app" @click="num ">
    <transition-group 
      v-bind:css="false" 
      v-on:before-enter="beforeEnter" 
      v-on:enter="enter"
      v-on:after-enter="afterEnter">

      <item v-for="(n,index) in num" 
        :key=n 
        :data-delay=index*100 
        data-y="100%"
        />

    </transition-group>
  </div>


new Vue({
  el: "#app",
  data: () => ({
    num: 0
  }),
  methods: {
    beforeEnter(dom) {
      let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset;
      dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`;
    },
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.style.cssText = `transition: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`;
        //监听 transitionend 事件
        var transitionend = window.ontransitionend "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
         dom.removeEventListener(transitionend, onEnd);
         done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
        });
      }, delay)
    },
    afterEnter(dom) {
      dom.style.cssText = "";
    }
  }
})

vue的列表交错过渡实现代码示例

嗯 不错，不过既然都上 js 了，能限制的就只有你的想象力了。

html

  <item v-for="(n,index) in num" 
    :key=n 
    :data-delay=index*100 
    :data-x="index%2 === 0 " 
    :data-y="getRandom()+'%'"
    :data-s="Math.random()"
  />

getRandom() {
  var rate = Math.floor(Math.random() * 90 + 10);
  return Math.random() > 0.5 "text-align: center">vue的列表交错过渡实现代码示例




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com