높이 애니메이션 숨기기 : 의사 요소 전에

Question

애니메이션 타임 라인을 만들려고합니다. 시간 표시 막대가 나타날 때 애니메이션을 트리거하기 위해 scroll reveal을 사용하고 있습니다. 각 타임 라인 엔트리는 왼쪽 테두리와 의사 요소가 연관되어 있습니다. : 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/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 클래스로 설정하면됩니다.