javascript - 高度动画隐藏:Before Pseudo Element

Question

我正在尝试创建动画时间线。当时间线进入 View 时，我使用滚动显示来触发动画。每个时间线条目都有一个左边框和一个伪元素 :before 与其关联。 :before 元素是一个点，标记每个时间线条目的开始。当对包含边框的 div 的高度进行动画处理时，:before 伪元素溢出将被切断。我已经使用 !important 标志将溢出设置为可见，但这似乎并没有解决问题。有谁知道为什么 :before 伪元素被切断？感谢您的帮助!

$(function() {
  $('.tml-content h2').css("opacity", 0);
  $('.tml-content p').css("opacity", 0);
  var height = $('.timeline').height();
  $('.timeline').height(height);
  window.sr = ScrollReveal();
  var config = {
    // 'bottom', 'left', 'top', 'right'
    origin: 'bottom',

    // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
    distance: '0px',

    // Time in milliseconds.
    duration: 1000,
    delay: 0,

    // Starting angles in degrees, will transition from these values to 0 in all axes.
    rotate: {
      x: 0,
      y: 0,
      z: 0
    },

    // Starting opacity value, before transitioning to the computed opacity.
    opacity: 1,

    // Starting scale value, will transition from this value to 1
    scale: 1,

    // true:  reveals occur every time elements become visible
    // false: reveals occur once as elements become visible
    reset: false,

    // Change when an element is considered in the viewport. The default value
    // of 0.20 means 20% of an element must be visible for its reveal to occur.
    viewFactor: 0.0,

    // Callbacks that fire for each triggered element reveal, and reset.
    beforeReveal: function(domEl) {},
    beforeReset: function(domEl) {},

    // Callbacks that fire for each completed element reveal, and reset.
    afterReveal: function(domEl) {animateHeight(domEl)},
    afterReset: function(domEl) {}
  };
  sr.reveal('.tml-line', config, 3000);

  function animateHeight(domEl) {
    var height = $(domEl).height();
    $(domEl).css("border-left", "1px solid #cf1e27");
    $(domEl).height(0);
    $(domEl).children('.tml-content').addClass("fg-timeline-active");
    $(".tml-line").animate({
      height: height
    }, 2000, function() {
      $(domEl).find('h2').animate({"opacity": 1}, 1000);
      $(domEl).find('p').animate({"opacity": 1}, 1000);
    });
  }
});

.filler {
  height: 1200px;
  width: 100%;
  background-color: azure;
}

.timeline {
  height: 100%;
  margin: 16px auto;
  margin: 1rem auto;
  border-radius: 1rem;
  padding: 32px 24px;
  padding: 2rem 1.5rem;
  overflow: visible !important;
}

.timeline .tml-content {
  -webkit-transform: translate(0, -2rem);
  -ms-transform: translate(0, -2rem);
  transform: translate(0, -2rem);
  padding: 24px;
  padding: 1.5rem;
  overflow: visible !important;
}

.timeline .tml-content.fg-timeline-active:before {
    content: "";
    width: 8px;
    width: 0.5rem;
    height: 8px;
    height: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    border: 4px solid #cf1e27;
    position: absolute;
    -webkit-transform: translate(-2rem, 0.5rem);
    -ms-transform: translate(-2rem, 0.5rem);
    transform: translate(-2rem, 0.5rem);
    z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfeeeffe2e1e1ffe8fbe8ece1cdbea3bea3bf" rel="noreferrer noopener nofollow">[email protected]</a>/dist/scrollreveal.min.js"></script>
<div class="filler">

</div>
<div class="timeline">
  <div id="test" class="tml-line">
    <div class="tml-content">
      <h2>1900</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>1900 - 2000</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2001</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2002</h2>
      <p>Sample text...</p>
    </div>
  </div>
  <div class="tml-line">
    <div class="tml-content">
      <h2>2003</h2>
      <p>Sample text...</p>
    </div>
  </div>
</div>

Answer 1

您可能可以回答自己的问题，但无论如何我都会发布答案。正如您所看到的，您所需要做的就是将溢出样式设置为 tml-line 类。

.tml-line {
   overflow: visible !important;
}