设置溢出属性的动画 [英] Animate the overflow property

问题描述

我需要设置动画高度，并为第一个关键帧设置overflow: hidden，为最后一个关键帧设置overflow: visible(并保留它).

I need to animate height, and set overflow: hidden for the first keyframe, and overflow: visible (and keep it) for the last one.

我正在尝试，但是最后，overflow仍然是hidden.

I'm trying this, but at the end, overflow is still hidden.

我该如何解决这个问题?

How can I solve this issue?

其中2个只是SCSS polifill mixins.

The 2 includes are merely SCSS polifill mixins.

@include keyframes(open) {
  0% {
    height: 0;
    overflow: hidden;
  }
  100% {
    height: $main_menu_height;
    overflow: visible;
  }
}


#main-menu-box {
    overflow: hidden;
    height: 0;

    &.opened{
       @include animation('open 200ms ease-out 0s 1 normal forwards');
    }
}

推荐答案

解决方案是使用AnimationEvent侦听器.这是我的原始实现:

The solution is to use AnimationEvent listeners. Here's my raw implementation:

CSS

•2个动画(打开，关闭)

• 2 animations (open, close)

•2类(开放，关闭)

•2种状态(隐藏/可见溢出)

• 2 states (overflow hidden/visible)

打开和关闭总是在动画开始时进行切换，而隐藏/可见状态在动画结束时会有所不同.

opened and closed are always toggled at animationstart, while hidden/visible states are differently worked out on animationend.

注意:您会看到一个#main-menu元素:这是在y轴上具有平移转换的UL，因为整个过程都是菜单的上下滑动效果.

Note: you'll see a #main-menu element: it's an UL with transitioned translations on y-axis, because the whole thing is a menu slide-down/up effect.

    @include keyframes(open) {
       0% {
         height:0;
       }
       100% {
         height:$main_menu_height;
       }
    }

    @include keyframes(close) {
       0% {
         height:$main_menu_height;
       }
       100% {
         height:0;
       }
    }


 #main-menu-box{
    overflow-y:hidden;
    height:0; // js

    &.closed{
        @include animation('close 200ms ease-out 0s');
    }

    &.opened{
        @include animation('open 200ms ease-out 0s 1');

        //#main-menu{
        //  @include translate(0, 0);
        //}
    }

    &.overflow-hidden{
        overflow-y:hidden;
    }

    &.overflow-visible{
        overflow-y:visible;
    }
 }

JS

•汉堡包是一个简单的开/关按钮

• hamburger is a simple on/off button

•现在我必须同时使用jquery和vanilla选择器.

• for now I had to use both jquery and vanilla selectors..

function poly_event_listener(element, type, callback) {
    var pfx = ['webkit', 'moz', 'MS', 'o', ''];
    for(var i=0; i<pfx.length; i++) {
        if (pfx[i] === '') type = type.toLowerCase();
        element.addEventListener(pfx[i]+type, callback, false);
    }
}

var hamburger = $('header .hamburger');
var main_menu_box = $('#main-menu-box');
var main_menu_box_std = document.querySelector('#main-menu-box');
var init_menu = true;

hamburger.click(function(){
  if(init_menu){
    main_menu_box.addClass('opened');
    init_menu = false;
    return;
  }

  main_menu_box.toggleClass('opened closed');
});

poly_event_listener(main_menu_box_std,'AnimationStart',function(e){
  main_menu_box.addClass('overflow-hidden');
  main_menu_box.removeClass('overflow-visible');
});

poly_event_listener(main_menu_box_std,'AnimationEnd',function(e){

  // in all the other cases I want hidden:true, visible:false
  // if class == closed, since animationend comes after animationstart, the state will already be hidden:true, visible:false
  // so non need to check for 'closed' here
  if(main_menu_box.hasClass('opened')){
    main_menu_box.addClass('overflow-visible');
    main_menu_box.removeClass('overflow-hidden');
  }
});

这对我有用.

这篇关于设置溢出属性的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！