Переместить div в соответствии с высотой другого div - PullRequest
Новая
       6

Переместить div в соответствии с высотой другого div

0 голосов
/ 08 мая 2020

У меня есть два div, и я хочу переместить их оба одновременно: один влево, а другой вверх.
Я сделал это с помощью свойства transfom CSS и установил translateX и translateY в пикселях .

Как я могу добиться того же эффекта, если я не знаю высоту первого div? Он адаптивен в зависимости от своего содержимого.
В моем реальном проекте используется Angular, и я хочу избежать использования чистого JQuery (чистое CSS решение будет отличным!).

EDIT :
Я использую приведенный выше класс для анимации моего второго div: 

.to-up {
    transition-delay: .2s;
    transform: translateY(-127px);
}

Я пришел к этому значению 127 пикселей с помощью этого вычисления:
div1 height + div1 margin-bottom + div1 границы.

В моем реальном случае высота div1 зависит от его содержимого, поэтому я не знаю, как анимировать div2 в верхней части его родительского элемента. Как я могу это сделать?

Вот мой HTML: 

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
</div>

Мой CSS: 

.container {
    width: 100%;
}

#item1 {
    height: 120px;
}

#item2 {
    height: 80px;
}

.item {
    width: 100px;
    border: 1px solid black;
    margin: 5px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.to-right {
    transform: translateX(-107%);
}

.to-up {
    transition-delay: .2s;
    transform: translateY(-127px);
}

И JQuery: 

$('.item').on('click', function() {
    $('#item1').toggleClass('to-right');
    $('#item2').toggleClass('to-up');
});

Наконец, есть код, работающий с пикселями на Jsfiddle .

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

Проблема исправлена.
Вместо использования свойства translateY для перемещения второго div я использовал animation with animation-time-function as linear и animation-fill-mode as вперед .

Что я изменил?

  • Элемент контейнера теперь имеет относительное положение.
  • Была создана анимация с именем top (установлено значение 0 на 100%).
  • Класс .move-up изменяет положение элемента на абсолютное и вызывает верх анимация.
  • Я установил класс .move-up для второго div при нажатии.

Вот рабочий po c на Jsfiddle .

HTML: 

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
</div>

JQuery: 

$('.item').on('click', function() {
    $('#item1').toggleClass('to-right');
    $('#item2').toggleClass('to-top');
});

CSS: 

.container {
    width: 100%;
    position: relative;
}

#item1 {
    height: 120px;
}

#item2 {
    height: 80px;
    margin-top: 0px;
}

.item {
    width: 100px;
    border: 1px solid black;
    margin: 5px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.to-right {
    transform: translateX(-107%);
}

.to-top {
    position: absolute;
    animation-name: top;
    animation-duration: .3s;
    animation-delay: .2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes top {
    0% {
        top: 100%;
    }
    100% {
        top: 0;
    }
}
0 голосов
/ 08 мая 2020

Это лучшее решение, которое вы можете сделать с Angular в шаблоне (не забудьте инициализацию переменной «goOn» в компоненте): 

<div class="container">
    <div id="item1" class="item" [class.to-right]="goOn" (click)="goOn = !goOn">Test1</div>
    <div id="item2" class="item" [class.to-up]="goOn" (click)="goOn = !goOn">Test2</div>
</div>

Вот рабочий пример : https://stackblitz.com/edit/angular-animation-on-click?file=src / app / app.component. html

Я думаю, вы не сможете обойтись без angular (или js), потому что мы говорим о событие "click".

Я не понимаю, что вы хотите делать, не зная высоты окна. Куда вы хотите их переместить? Я думаю, что, не зная ее решения, вы не сможете этого сделать.

...