高さアニメーション非表示：擬似要素の前

Question

アニメーションタイムラインを作成しようとしています。タイムラインが表示されたら、スクロールの表示を使ってアニメーションをトリガーします。各タイムラインエントリには左境界線と擬似要素があり、前に関連付けられています。 ：before要素は、各タイムラインエントリの先頭を示すドットです。ボーダを含むdivの高さをアニメートすると、：before擬似要素のオーバーフローがカットされます。 ！重要なフラグでオーバーフローを表示するように設定しましたが、それはそのトリックを行うようには見えません。だれかが：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/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>

Answer 1

あなたはおそらく、あなた自身の質問に答えることができますが、私はとにかく答えを投稿しています。あなたが必要とするのは、オーバーフロースタイルをtml-lineクラスに設定することだけです。

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