gpt4 book ai didi

css - translatey css动画后出现一些空白

转载 作者:行者123 更新时间:2023-11-28 17:07:03 26 4
gpt4 key购买 nike

我有一个像这样的侧面构建

<body>
<header>blabla</header>
<main> some content </main>
<footer>blabla</footer>
</body>

我必须在标题下对主要内容的某些部分进行动画处理,

enter image description here

所以我在主体和页脚周围放置了一个 div,并将其用作 anchor 。

 <body>
<header>blabla</header>
<div id="myId">
<main> some content </main>
<footer>blabla</footer>
</div>
</body>

然后我用它来翻译。但是在 translatey 的动画之后有一些空白。 enter image description here 如何在动画后删除这个空白?

最佳答案

Transform 只改变元素的位置,而不是他在 DOM 加载时占用的空间。请看下面的片段

.parent {
padding: 20px;
background: black;
}

.child {
height: 100px;
background: red;
transition: all .3s ease;
}

.parent:hover .child {
transform: translateY(-50px);
}
<div class="parent">
<div class="child"></div>
</div>

你正在寻找的是使用边距负值来制作动画,如下所示......margin 影响 element 的宽度,它在 时携带>DOM load Using margin parent and child will both move.

.parent {
padding: 20px;
background: black;
}

.child {
height: 100px;
background: red;
transition: all .3s ease;
}

.parent:hover .child {
margin-top: -50px;
}
<div class="parent">
<div class="child"></div>
</div>

我希望这能帮助您区分 translateYmargin-top

关于css - translatey css动画后出现一些空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48821979/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com