Question

我试图创建一个动画时间轴。当时间轴进入视图时，我使用滚动显示触发动画。每个时间轴条目都有一个左边框和一个伪元素：在与之关联之前。：before元素是一个标记每个时间轴条目开头的点。当动画包含边框的div的高度时，：前面的伪元素溢出被切断。我已经通过！important标志设置溢出到可见，但似乎没有做到这一点。有谁知道为什么：在伪元素被切断之前？谢谢你的帮助！

＆＃13;

$(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);
    });
  }
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal@3.3.2/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>

＆＃13;

Answer 1

您可以回答自己的问题，但我还是会发布一个答案。如您所见，您只需要将溢出样式设置为tml-line类。

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

高度动画隐藏：伪元素之前

1 个答案: