Анимировать свойство переполнения

Question

Мне нужно одушевить высоту и установить overflow: hidden для первого ключевого кадра и overflow: visible (и сохранить его) для последнего.

Я пытаюсь это сделать, но в конце, overflow по-прежнему hidden.

Как я могу решить эту проблему?

2 включают в себя только смесители полиморфизма SCSS.

@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'); 
    } 
} 

Answer 1

Решение заключается в использовании AnimationEvent слушателей. Вот моя сырая реализация:

CSS

• 2 анимации (открытие, закрытие)

• 2 класса (открытый, закрытый)

• 2 состояния (переполнение скрытого/видимое)

открытые и закрытые всегда переключаются при анимации, а скрытые/видимые состояния по-разному выработаны при анимации.

Примечание: вы увидите элемент главного меню #: это UL с переводимыми переводами по оси Y, потому что все это эффект слайд-вниз/вверх.

@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

• гамбургер простая кнопка включения/выключения

• теперь я должен был использовать как JQuery и ваниль селекторы ..

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'); 
    } 
}); 

это работает для меня.

Answer 2

Свойство переполнения не может быть анимировано с помощью CSS. Смотрите спецификации W3 здесь: overflow properties

Animatable: нет

Вы также можете просмотреть список Animatable свойств на MDN: Animated properties

---

Обход:

Если вам нужно изменить свойство переполнения, вы можете использовать JS. Вот пример с библиотекой jQuery.

Свойство переполнения изменяется с помощью переключения класса. Он срабатывает, когда ДИВ щелкают:

$('#w').click(function() { 
 
    $(this).toggleClass('open'); 
 
});

#w { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
} 
 
#w.open { 
 
    overflow: visible; 
 
} 
 
#w div { 
 
    height: 200px; 
 
    width: 50px; 
 
    background: gold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="w"> 
 
    <div></div> 
 
</div>