Как уменьшить div на 100% до 0%, к другому элементу на странице

Question

Возможен ли переход CSS3, как описано ниже?

Учитывая модальное наложение, при закрытии, вместо того, чтобы просто исчезать, я бы хотел, чтобы оно масштабировалось в размере от 100% до 0% по отношению к определенной кнопке на странице.

Кто-нибудь видел, как это делается с помощью CSS3? Возможно ли это?

Спасибо

Answer 1

Это то, что вы хотите? http://jsfiddle.net/AZWhQ/1/

.myOverlay{
    width:100%;
    height:100%;
    -webkit-transition:  -webkit-transform .5s ease-out;
    -moz-transition:  -moz-transform .5s ease-out;
    -ms-transition:  -ms-transform .5s ease-out;
    -o-transition:  -o-transform .5s ease-out;
    transition:  transform .5s ease-out;
    background-color: rgba(0,0,0,.2);
}
.myOverlayClose{
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -ms-transform: scale(0.0);
    -o-transform: scale(0.0);
    transform: scale(0.0);
}

проверить демо

Answer 2

Это возможно - вот очень упрощенная версия, сделанная путем установки transform-origin:

Fiddle

Код:

document.getElementById('dismiss').addEventListener('click', function() {
    var button = document.getElementById('mybutton');
    var overlay = document.getElementById('overlay');

    overlay.style['-webkit-transform-origin'] = (button.offsetLeft + button.offsetWidth/2) + 'px ' + 
                                                (button.offsetTop + button.offsetHeight/2) + 'px';

    overlay.style['-webkit-transform'] = 'scale(0)';

    overlay.addEventListener('webkitTransitionEnd', function() {
        overlay.className = 'hide';
    });
});

Самым сложным для этого было бы установить положение кнопок относительно наложения.Затем используйте его, чтобы установить transform-origin, который будет действовать как точка схода.

Answer 3

Если вам известно положение кнопки, которую вы пытаетесь уменьшить наложение, вы можете анимировать верхнюю, нижнюю, левую и правую стороны наложения на верхнюю, нижнюю, левую и правую части кнопки,соответственно.Если он меняется, вам может понадобиться какой-то хук JavaScript, чтобы определить положение кнопки, например, используя jQuery's .offset.