裴大头-秦可爱

裴大头-秦可爱

vue项目中div切换显示与隐藏状态时的动画效果

发表于 2021-05-13
秦可爱
阅读量 368
更新于 2021-05-29
// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
// el:指的是当前调用这个方法的元素对象
// done:用来决定是否要执行后续的代码如果不执行这个方法,那么将来执行完before执行完enter以后动画就会停止
beforeEnter: function (el) {
    el.style = "padding-left: 100px";
},
enter: function (el, done) {
    el.offsetHeight;
    el.style = "padding-left: 0px";
    //done();
},
//用不到可以不写
afterEnter: function (el) {},
//显示到隐藏
//用不到可以不写
beforeLeave: function (el) {},
leave: function (el, done) {
    el.offsetHeight;
    el.style = "padding-left: 0px";
    done();
},
afterLeave: function (el) {
    el.style = "padding-left: 300px";
},
js

这些钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用。 当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

评论
来发一针见血的评论吧!
表情
  • 柠檬不萌

    2021-05-20 22:02

    这样确实比之前好看了

    0
    回复
      共0条回复,点击查看
  • 幽魂憋死不冒泡

    2021-05-15 02:31

    吆西

    0
    回复
      共0条回复,点击查看
  • 裴大头

    男博主

    2021-05-13 22:27

    给你点个赞🤞

    0
    回复
      共0条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23351

© 2023 Pei你看雪鲁ICP备19037910号-2