根据其他div的高度移动div答案

【问题标题】：Move div according to other div's height根据其他div的高度移动div
【发布时间】：2020-05-09 00:22:30
【问题描述】：

我有两个 div，我想同时移动它们：一个向左，另一个向上。
我使用 transfom CSS 属性做到了这一点，并以像素为单位设置了 translateX 和 translateY。

当我不知道第一个 div 的高度时，如何做同样的效果？它根据其内容具有附加性。
我的真实项目使用 Angular，我想避免使用纯 JQuery（纯 CSS 解决方案会很棒！）。

编辑：
我使用上面的类来为我的第二个 div 设置动画：

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

我通过这个计算得出了 127px 的值：
div1 高度 + div1 底部边距 + 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 上处理像素的代码。

非常感谢！

【问题讨论】：

标签： html css angular css-animations

【解决方案1】：

这是您可以做的更好的解决方案，在模板中使用 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），您将无法做到这一点，因为我们正在谈论“点击”事件。

在不知道盒子高度的情况下，我不明白你想做什么。你想把它们移到哪里？我认为不知道它的解决方案你是做不到的。

【讨论】：

我已经用JS来处理点击事件了。这可以。当我不知道 div 一的大小时，我不知道我在 CSS 上放了什么 tranformY。我会更新问题。

【解决方案2】：

问题已解决。
而是使用 translateY 属性移动第二个 div，我使用 animation 和 animation-timing-function 作为 linear 和 animation-fill-mode 为 forwards。

我改变了什么？

容器元素现在具有相对位置。
创建了一个名为 top 的动画（在 100% 时将 top 设置为 0）。
.move-up 类将元素位置更改为绝对位置并调用顶部动画。
我将 .move-up 类设置为点击时的第二个 div。

这是Jsfiddle 上的工作 poc。

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

【讨论】：