Question

我有像这样的侧面构建

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

而且我用它来翻译。但是在翻译动画之后会有一些空白区域。动画后如何删除这个空格？

Answer 1

Transform仅更改元素的位置，而不是在DOM加载时更改的空间。见下面的代码段

＆＃13;

.parent {
  padding: 20px;
  background: black;
}

.child {
  height: 100px;
  background: red;
  transition: all .3s ease;
}

.parent:hover .child {
  transform: translateY(-50px);
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

您正在寻找的是使用边距负值来制作如下所示的动画... margin会影响element加载时DOM的宽度使用保证金父母和孩子都会搬家。

＆＃13;

.parent {
  padding: 20px;
  background: black;
}

.child {
  height: 100px;
  background: red;
  transition: all .3s ease;
}

.parent:hover .child {
  margin-top: -50px;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

我希望这会帮助您解决translateY和margin-top

之间的差异

Answer 2

如果其他人也面临这种情况，请尝试去除方框阴影

在翻译css动画后出现了一些空白区域

2 个答案: