Vue的transition中的slidedown,slideUp展开收起动画
2021-02-23 11:15

vue transition动画

vue的transition过渡动画在vue官网已有详细教程,就不赘述了。然而当我们使用transition来实现slidedown,slideup的展开收起动画时,就会发现没有过渡动画,是transition失灵了吗?

当然不是,是因为css3的transition动画需要知道两个信息,开始状态,结束状态。

image.png

如上图的点击实现slideup的收起动画,外层div一般高度都是自动的,在transition过程中,css3只知道结束状态是 height:0;

而不知道开始状态 height: **px。所以才没有显示过渡动画。

transition实现slidedown,slideup的方法。

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled">
  <!-- ... --></transition>

transition除了最常用的方法,还提供了回调钩子的方法。对于slideup的动画,我们要做的就是在beforeEnter钩子回调里面对容器div设置高度为具体数值,

然后在enter中修改height数值为0,那么就能实现slideup的动画过渡了。

methods:{
        beforeEnter(el){
            el.className=el.className+' my-transition';
            el.style.height = '0';
            // 缺少处理了 overflow:hidden 样式的添加,完整组件需要添加此处理,在动画结束后恢复原来的oveflow样式。
        },
        enter(el){
            el.style.height = el.scrollHeight + 'px';
        },
        afterEnter(el){
            el.className=el.className.replace("my-transition",'');
            el.style.height = '';
        },
        enterCancelled(el){

        },
        beforeLeave(el){
            el.style.height = el.scrollHeight + 'px';
        },
        leave(el){
            let ht=el.scrollHeight;
            el.className=el.className+' my-transition';
            el.style.height = 0;
        },
        afterLeave(el){
            el.className=el.className.replace("my-transition",'');
            el.style.height = '';
        },
        leaveCancelled(el){
            
        }
    }

这其中,我们用到了scrollHeight来获取元素的高度,对于没有滚动条的元素div,此属性有一个特性,即是div的display:none时,也能获取到div完全展现时的高度。是一个取巧的方法。

细心的你一定还注意到了一个className 为 'my-transition',它是设置css transition过渡的关键。

.my-transition{transition: .3s height ease-in-out/* , 10.5s padding-top ease-in-out, 10.5s padding-bottom ease-in-out */}

没错,他主要设置了transition属性,来实现transition动画。

结语:

 vue的slidedown,slideup的动画是不是只有这一种实现方式呢。条条大路通罗马,肯定有很多中方式,比如animation动画。我们还可以使用vue的状态过渡动画,这可能就需要用到第三方库tween.js了。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(1544)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1