javascript - 当元素高度取决于该元素内的文本时，对元素高度进行动画处理

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>