动画div的高度以显示整个内容 [英] Animating the height of a div to show the whole content

问题描述

我听说你不能将高度设置为自动，初始或继承动画的结尾。那么你如何将高度设置为内容的高度？在我的例子中，结尾高度是500，但我希望高度是任何内容。

$（function（）{console.log （）。$（this）.toggleClass（open）}）}

  .area {background：limegreen;宽度：50％;保证金：0汽车; max-height：200px;溢出：隐藏; 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坐amet，consectetur adipisicing elit。 Labore sequi voluptatum sed vel aut，neque dolor deserunt placeat impedit possimus illum。并且，它成立了一个独特的地方，包括一个古董店，一个古董店，一个商店，一个商店，一个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，在saepe consectetur aperiam molestiae ducimus！可以使用的药物包括但不限于：癸酸，癸酸，异labor酸，癸酸，癸酸，癸酸，请将您的个人信息告知我们，我们会尽快给您回复。 Nihil quam，aperiam saepe voluptates praesentium，sed temporal 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 fundit porro eligendi quam iusto soluta doloremque sapiente，consequuntur beatae，quod nostrum suscipit voluptates requitittibus at minus ut ea iste，nisi sit dolorum！练习，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 asperiperi 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 voluptis 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>

解决方案使用转换 >动画的jquery。这里高度在预设值 200px 和 auto 之间切换。

  $（function（）{console.log（$（。area）。height（））$（。area）。 ！$（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;宽度：50％;保证金：0汽车; 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坐amet，consectetur adipisicing elit。 Labore sequi voluptatum sed vel aut，neque dolor deserunt placeat impedit possimus illum。并且，它成立了一个独特的地方，包括一个古董店，一个古董店，一个商店，一个商店，一个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，在saepe consectetur aperiam molestiae ducimus！可以使用的药物包括但不限于：癸酸，癸酸，异labor酸，癸酸，癸酸，癸酸，请将您的个人信息告知我们，我们会尽快给您回复。 Nihil quam，aperiam saepe voluptates praesentium，sed temporal 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 fundit porro eligendi quam iusto soluta doloremque sapiente，consequuntur beatae，quod nostrum suscipit voluptates requitittibus at minus ut ea iste，nisi sit dolorum！练习，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 asperiperi 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 voluptis 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>  

I hear that you can't set the height to auto, initial, or inherit for the end of an animation. so how would you set the height to the content's height? In my example the ending height is 500 but I want the height to be whatever the content is.

$(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>

解决方案

Instead of using css transition I have used animate of jquery. Here height is toggled between preset value 200px and 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>

这篇关于动画div的高度以显示整个内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！