javascript - 动画 div 的高度以显示整个内容

Question

我听说您不能将动画结束时的高度设置为自动、初始或继承。那么如何将高度设置为内容的高度呢？在我的示例中，结束高度为 500，但我希望高度为内容的高度。

$(function(){
  console.log($(".area").height())
  $(".area").on("click", function(){
    $(this).toggleClass("open")
  })
})

.area{
  background: limegreen;
  width: 50%;
  margin: 0 auto;
  max-height: 200px;
  overflow: hidden;
  transition: max-height .5s;
}
.area.open{
  max-height: 500px;
 /* max-height: initial;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab, 
</div>

Answer 1

我没有使用 css transition，而是使用了 jquery 的 animate。这里的高度在预设值 200px 和 auto 之间切换。

$(function(){
  console.log($(".area").height())
  $(".area").on("click", function(){
    if(!$(this).hasClass('open')) {
       $(this).addClass('open');
       var currHt = $(this).height();
       var autoHt = $(this).css("height","auto").height();
       $(this).css("height",currHt+"px").animate({height: autoHt+"px"}, 500);
    } else {
       $(this).removeClass('open')
       $(this).animate({height: "200px"}, 500); 
    }

  })
})

  
.area{
  background: limegreen;
  width: 50%;
  margin: 0 auto;
  height: 200px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sequi voluptatum sed vel aut, neque dolor deserunt placeat impedit possimus illum. Et consequuntur a atque placeat incidunt cupiditate sint laborum impedit quia ex aut pariatur dicta dolor, hic exercitationem in explicabo voluptatem consequatur odio, deserunt, voluptatibus doloremque. Impedit quam sapiente, voluptate hic dicta neque illum? Ducimus harum ullam eum officiis fuga aliquid nostrum quasi, vitae nam voluptas tenetur sed sequi incidunt facilis, expedita, inventore. Deleniti tenetur veritatis voluptas quibusdam omnis, distinctio perspiciatis harum, eligendi tempore rerum molestiae, dolores facere cum? Vel eius earum iste nesciunt ullam labore tempora, facere adipisci, soluta in corporis doloribus amet, similique quam at obcaecati sunt sapiente error atque impedit ut. Saepe officia voluptas cupiditate iure et autem laudantium, totam illo voluptatibus unde ex, dolores animi. Eligendi quis, in saepe consectetur aperiam molestiae ducimus! Repellendus nam dolor provident debitis eaque animi rerum eveniet, distinctio laboriosam quidem esse molestias commodi explicabo temporibus cupiditate. Unde vitae perferendis ut eum odio assumenda, tenetur sequi dolorem id, eos natus laudantium dolor asperiores voluptate voluptates. Nihil quam, aperiam saepe voluptates praesentium, sed tempora quidem error pariatur numquam reprehenderit repellendus. Alias ex, illum ipsum sunt inventore vero amet, deleniti provident hic dolor magni officiis nam quisquam libero suscipit placeat ea debitis iure ullam perferendis iusto beatae. Libero dolore sequi consequatur, est rerum enim molestiae quia voluptates, aspernatur rem nobis quisquam quam, soluta voluptatibus. Sed architecto assumenda fugit porro eligendi quam iusto soluta doloremque sapiente, consequuntur beatae, quod nostrum suscipit voluptates necessitatibus at minus ut ea iste, nisi sit dolorum! Exercitationem, incidunt saepe asperiores. Labore voluptas dolor modi molestiae mollitia itaque ut inventore, possimus sunt provident! Ipsam in neque sint aperiam non veniam eveniet, debitis quae consequuntur distinctio dolores saepe illo ullam asperiores praesentium a quam inventore tempore assumenda, natus corporis mollitia at possimus harum. Expedita aspernatur consequatur obcaecati vero neque asperiores quasi natus voluptas dolor doloribus. Libero consequuntur nam magni ratione rem incidunt odit blanditiis aperiam molestias vero fuga, inventore fugit labore dolores dignissimos officia itaque ad explicabo quisquam minima minus asperiores repudiandae, hic voluptate sed. Magni vel labore, expedita enim voluptatibus asperiores alias commodi modi ea praesentium quo impedit dicta, vitae unde corrupti corporis laboriosam soluta quae. Sint officia quibusdam corporis blanditiis harum aspernatur, itaque quasi nihil numquam voluptatibus non sunt architecto tempora, dignissimos voluptatem debitis aperiam neque labore. Perspiciatis voluptates delectus fugit quae nulla tempora enim ex optio voluptatum cumque nostrum, neque repellendus. Cum commodi ullam, consequuntur pariatur hic officia, voluptas ea obcaecati ex fugiat, tenetur ad nostrum saepe error minus rerum modi adipisci iure accusantium quia quis cumque explicabo. Aliquid reprehenderit voluptatem, id laudantium error, adipisci alias possimus facere doloremque expedita sit eligendi cupiditate. Cumque optio, beatae consequatur nostrum accusamus sapiente vero deleniti nulla suscipit. Labore atque molestias quaerat sequi quas culpa quisquam sit ea suscipit sapiente impedit aliquam dolore repellat, est id ipsum doloribus facere quos omnis doloremque, delectus maxime excepturi tenetur! Nobis soluta esse dicta at doloribus repellat cumque animi nulla vitae repellendus id, quod rerum pariatur voluptatem, vero minus est et hic nisi ipsam aperiam! Quibusdam architecto aspernatur debitis commodi neque dolorum, impedit ad facere. Vero maiores alias saepe porro, dicta illo id suscipit adipisci animi earum neque quam consequatur pariatur, assumenda iure amet quidem, architecto ad! Ipsa vel nesciunt iste ipsum modi corporis, consequuntur voluptas quod esse veniam consectetur error illo, suscipit ab quos minus dolor atque aliquid sequi temporibus dolore architecto necessitatibus magni. Cumque quibusdam distinctio in vel aspernatur, qui maiores laudantium numquam quo itaque asperiores optio aperiam perspiciatis, ullam illo ab, 
</div>