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

Question

I'm attempting to create an animated timeline. I'm using scroll reveal to trigger the animation when the timeline comes into view. Each timeline entry has a left border and a pseudo element :before associated with it. The :before element is a dot that marks the beginning of each timeline entry. When animating the height of the divs that contain the border, the :before pseudo element overflow is cut off. I've set overflow to visible with the !important flag but that doesn't seem to do the trick. Does anyone know why the :before pseudo element is being cut off? Thanks for the help!

 $(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, eg '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

You can probably answer your own question but I'm posting an answer anyway. As you saw all you need is to set the overflow style to the tml-line class.

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