How to make content hide animation?

Question

css

There are 2 blocks that are shown, and a button, when pressed, 8 more such blocks will pop up. So here is the animation made using animate.css. The content comes out beautifully from top to bottom, but when it is removed, it simply disappears! How to make it go down when it disappears?

<div class="container">
    <section class="section-three" id="four">
      <div class="row">
        <div class="col-md-5 offset-md-1">
          <div class="section-item">
            <div class="section-img">
              <img src="img/section-5.jpg">
            </div>
            <p class="section-categories">Lifestyle</p>
            <p class="section-name">Top 10 song for running</p>
            <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
          </div>
        </div>
        <div class="col-md-5 ">
          <div class="section-item">
            <div class="section-img">
              <img src="img/section-6.jpg">
            </div>
            <p class="section-categories">Lifestyle</p>
            <p class="section-name">Cold winter days</p>
            <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
          </div>
        </div>
      </div>
      <div class="dop-content animated fadeInDown fadeOutUp">
        <div class="row">
          <div class="col-md-5 offset-md-1">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-5.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Top 10 song for running</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
          <div class="col-md-5 ">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-6.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Cold winter days</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
          <div class="col-md-5 offset-md-1">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-5.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Top 10 song for running</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
          <div class="col-md-5 ">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-6.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Cold winter days</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
          <div class="col-md-5 offset-md-1">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-5.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Top 10 song for running</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
          <div class="col-md-5 ">
            <div class="section-item">
              <div class="section-img">
                <img src="img/section-6.jpg">
              </div>
              <p class="section-categories">Lifestyle</p>
              <p class="section-name">Cold winter days</p>
              <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <section class="section-btn">
    <button class="btn btn-outline-secondar footer-btn" id="footer-btn">Load more</button>
  </section>

$('#footer-btn').click(function(){
  $('.dop-content').toggleClass('dop-content_active');
  $('.dop-content').toggleClass('fadeOutUp');
})

Answer 1

Maybe so?
jsfiddle.net/25g4ud0y