翻译css动画后出现一些空白
我有一个这样的侧面
<body>
<header>blabla</header>
<main> some content </main>
<footer>blabla</footer>
</body>
我必须在标题下为主要内容的某些部分设置动画，
所以我在主要和页脚周围放置了一个 div 并将其用作锚点。
<body>
<header>blabla</header>
<div id="myId">
<main> some content </main>
<footer>blabla</footer>
</div>
</body>
然后我用它来翻译。但是在translatey的动画之后有一些空白。
如何在动画后删除这个空白？
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加载时携带的宽度使用边距父项和子项都将移动。
.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>我希望这会帮助你区分translateY和margin-top
| 归档时间： |
|
| 查看次数： |
1613 次 |
| 最近记录： |