Попин из центра - PullRequest
Новая
       14

Попин из центра

0 голосов
/ 04 марта 2019

Я хочу, чтобы мои StyledModalWrapper анимировали scale().

Мой StyledComponent имеет следующие свойства: 

top: 50%;
left: 50%;
max-width: ${(props:IModal) => props.width};
min-height: auto;
transform: translate(-50%, -50%);
animation: ${(props:IModal) => props.closing ? popOut : popIn} .3s linear;

Анимация: 

0% {
    transform: scale(0);
}
80% {
    transform: scale(1.25);
}
100% {
    transform: scale(1);
}

В этомв случае, если поле отлично масштабируется, только позиционирование не так.

Я попытался добавить 

0% {
    transform: scale(0) translate(100%, 100%);
}
80% {
    transform: scale(1.25) translate(25%, 25%);
}
100% {
    transform: scale(1) translate(50%, 50%);
}

В этом случае он смахивает с кривой.

Центрполе всегда должно оставаться в середине родительского элемента.
Родитель имеет width/height из 100vw/100vh.

1 Ответ

0 голосов
/ 04 марта 2019

Если вы используете transform, это ваш друг: transform-origin

Позволяет вам изменить положение слева / сверху в другое место.В вашем случае это вероятно center вам нужно.

MDN документы: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

...