溢出：隐藏在带有显示：内联块子级的容器上不起作用

Question

我正在为一个网站制作一个介绍动画，其中孩子们从底部向上滑动（

margin-top: 80px

），容器设置为固定高度，

overflow:hidden

使其看起来光滑。

尽管有

overflow: hidden

属性，子级在动画开始时仍然可见。

如果有人能帮助我解决这段代码，那就太好了。我尝试为儿童使用几种不同的显示属性，但似乎没有任何效果。

setTimeout(function() {
  $('.anim_word').addClass('show');
}, 1200);

.container {
  height: 100%;
  width: 100%;
  background: #121212;
}

.anim_container {
  margin: 80px;
}

.anim_inner_container {
  position: relative;
  background-color: hsla(260, 91%, 84%, 1);
  background-image: radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}

.anim_line {
  height: 96px;
  width: 100%;
  overflow: hidden;
}

.anim_word {
  display: inline-block;
  margin-top: 80px;
  transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -webkit-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}

.anim_word span {}

.anim_word.show {
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word">A</div>
        <div class="anim_word">product</div>
        <div class="anim_word">designer</div>
        <div class="anim_word">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">design</div>
        <div class="anim_word">beautiful,</div>
        <div class="anim_word"> user</div>
        <div class="anim_word">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">products</div>
      </div>
    </div>
  </div>
</div>

Answer 1

子 div 仍然可见，因为它们没有溢出。例如，为什么不在 .anim-word 类中添加 margin-top:100%;

setTimeout(function() {
  $('.anim_word').addClass('show');
}, 1200);

.container {
    height: 100%;
    width: 100%;
    background: #121212;
  }
  
  .anim_container {
    margin: 80px;
  }
  
  .anim_inner_container {
    position: relative;
    background-color: hsla(260, 91%, 84%, 1);
    background-image: radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Calibri';
    font-size: 64px;
    line-height: 96px;
  }
  
  .anim_line {
    height: 96px;
    width: 100%;
    overflow: hidden;
  }
  
  .anim_word {
    display: inline-block;
    margin-top: 100%;
    transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
    -webkit-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
    -moz-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
    -ms-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
    -o-transition: all 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  }
  
  .anim_word span {}
  
  .anim_word.show {
    margin-top: 0px;
  }

       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <div class="container">
      <div class="anim_container">
        <div class="anim_inner_container">
          <div class="anim_line">
            <div class="anim_word">A</div>
            <div class="anim_word">product</div>
            <div class="anim_word">designer</div>
            <div class="anim_word">helping</div>
          </div>
          <div class="anim_line">
            <div class="anim_word">design</div>
            <div class="anim_word">beautiful,</div>
            <div class="anim_word"> user</div>
            <div class="anim_word">centered</div>
          </div>
          <div class="anim_line">
            <div class="anim_word">products</div>
          </div>
        </div>
      </div>
    </div>