Анимировать высоту элемента, когда она зависит от текста внутри этого элемента

Question

У меня сегодня одна проблема: я хочу изменить текст ниже, когда нажимаю на некоторые из этих значков: И на самом деле это работает с этим кодом:

CSS

.games-text {
    background-color: $color-primary;

    & p {
        max-width: 90rem;
        text-align: center;
        margin: 0 auto;
        padding: 3rem 0;
        font-size: 1.7rem;
        color: #D88087;
    }
}

JS

$(document).ready(function () {
    $('.games__game svg').click(function(e) {
        $('.games__game.active').removeClass('active');
        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

$(document).ready(function(){
    $("#game1 svg").click(function(){  
       $('.games-text').html('<p>Cash games, also sometimes referred to as ring games or live action games, are poker games played with "real" chips and money at stake, often with no predetermined end time, with players able to enter and leave as they see fit. In contrast, a poker tournament is played with tournament chips worth nothing outside the tournament, with a definite end condition (usually, only one player left), and a specific roster of competitors.</p>');
   });
});

$(document).ready(function(){
    $("#game2 svg").click(function(){  
       $('.games-text').html('<p>In a standard tournament format all players enter for the same amount of money which also carries a fee which the entity running the tournament keeps. As an example, “Casino Pokerology” might offer a no limit hold’em tournament that has a $50 entry cost plus a $5 fee to play. Once you post the $55, $50 of which goes into the prize pool and the other $5 is the fee to run the tournament, you may get $2,000 in non negotiable tournament chips. The blinds might start at $10 and $20 and escalate every twenty minutes. The continual escalation of the blinds forces the players to “gamble” more versus just playing conservatively and waiting for premium cards. This format is how the attrition of players whittles the number of starting players down to the eventual winners.</p>');
   });
});

$(document).ready(function(){
    $("#game3 svg").click(function(){  
       $('.games-text').html('<p>This type of tournament was started by the online poker sites but has now spread into the bricks and mortar cardrooms. They are played both one table as well as multiple tables. The name comes from the fact that to sign up all you need do is sit down. When the players in the tournament have all sat down – it “goes”. As an example, you enter an online poker site and select a one table sit & go (SnG), pay your entry fee, sit down and wait. The tournament starts when the last player who will complete the table sits down. These type of tournaments on the internet have become extremely popular, so much so that sometimes you need to be very “quick to click” in order to get in before the table fills up. One table sit & goes normally pay the top three finishers.</p>');
   });
});

$(document).ready(function(){
    $("#game4 svg").click(function(){  
       $('.games-text').html('<p>SPINS are three-handed Sit & Go tournaments where a multiplier between 2 and 240,000 randomly determines the size of the prizepool before the first card is dealt, so you could turn a $5 buy-in into a massive top prize of $1M in our SPINS $1M game.</p>');
   });
});

Проблема здесь в том, что высота этого красного контейнера ниже зависит от текста. Когда у меня будет больше текста, высота увеличится. Это нормально, НО, это изменение высоты происходит мгновенно, Я хочу как-то оживить это изменение , но я не знаю, как это сделать. Может ли кто-нибудь помочь нам с этим?

Answer 1

Добавлен div-обертка для анимации высоты. Использует .scrollHeight, чтобы вычислить высоту, чтобы установить для div обертки. css transition: height 2s для анимации высоты.

$(document).ready(function() {
  $('.games__game svg').click(function(e) {
    $('.games__game.active').removeClass('active');
    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
  });
});


$(document).ready(function() {
  $("#game1 svg").click(function() {
    $('.games-text').html('<p>Cash games, also sometimes referred to as ring games or live action games, are poker games played with "real" chips and money at stake, often with no predetermined end time, with players able to enter and leave as they see fit. In contrast, a poker tournament is played with tournament chips worth nothing outside the tournament, with a definite end condition (usually, only one player left), and a specific roster of competitors.</p>');
  });
});

$(document).ready(function() {
  $("#game2 svg").click(function() {
    $('.games-text').html('<p>In a standard tournament format all players enter for the same amount of money which also carries a fee which the entity running the tournament keeps. As an example, “Casino Pokerology” might offer a no limit hold’em tournament that has a $50 entry cost plus a $5 fee to play. Once you post the $55, $50 of which goes into the prize pool and the other $5 is the fee to run the tournament, you may get $2,000 in non negotiable tournament chips. The blinds might start at $10 and $20 and escalate every twenty minutes. The continual escalation of the blinds forces the players to “gamble” more versus just playing conservatively and waiting for premium cards. This format is how the attrition of players whittles the number of starting players down to the eventual winners.</p>');

  });
});

$(document).ready(function() {
  $("#game3 svg").click(function() {
    $('.games-text').html('<p>This type of tournament was started by the online poker sites but has now spread into the bricks and mortar cardrooms. They are played both one table as well as multiple tables. The name comes from the fact that to sign up all you need do is sit down. When the players in the tournament have all sat down – it “goes”. As an example, you enter an online poker site and select a one table sit & go (SnG), pay your entry fee, sit down and wait. The tournament starts when the last player who will complete the table sits down. These type of tournaments on the internet have become extremely popular, so much so that sometimes you need to be very “quick to click” in order to get in before the table fills up. One table sit & goes normally pay the top three finishers.</p>');
  });
});

$(document).ready(function() {
  $("#game4 svg").click(function() {
    $('.games-text').html('<p>SPINS are three-handed Sit & Go tournaments where a multiplier between 2 and 240,000 randomly determines the size of the prizepool before the first card is dealt, so you could turn a $5 buy-in into a massive top prize of $1M in our SPINS $1M game.</p>');
  });
});


$(document).ready(() => {
  var animHeight = () => {
    $('.gtwrap').css({
      overflow: 'hidden',
      height: $('.games-text').prop('scrollHeight'),
      transition: 'height 2s'
    })
  }
  animHeight();
  $('svg').click(() => {
    animHeight();
  })
});

.gtwrap {
  background-color: lightgrey;
}

.games-text p {
  max-width: 90rem;
  text-align: center;
  margin: 0 auto;
  padding: 3rem 0;
  font-size: 1.7rem;
  color: #D88087;
}

.games__game {
  display: flex;
  flex-direction: row
}

.games__game div {
  padding: 1px
}

svg {
  background-color: red;
  width: 30px;
  height: 30px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="games__game">
  <div id="game1"><svg></svg></div>
  <div id="game2"><svg></svg></div>
  <div id="game3"><svg></svg></div>
  <div id="game4"><svg></svg></div>
</div>
<div class="gtwrap">
  <div class="games-text">text</div>
</div>