裴大头-秦可爱

裴大头-秦可爱

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

发表于 2021-05-13
秦可爱
阅读量 428
更新于 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 的影响。

推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 931 天访客 25416

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