用流畅的动画展开div [英] Expand div on click with smooth animation

问题描述

我试图用速度/流畅的动画来扩大div。
现在div突然发生变化，我的要求是在扩展的同时给出流畅的动画。

$ b

http://jsfiddle.net/Sharan_thethy/pnjpj3uo/3/

  $（'。click1'）。find（'a [href =＃]'）。on（'click '，function（e）{
 e.preventDefault（）; 
 this.expand =！this.expand; 
 $（this）.text（this.expand？Hide Content： ）; 
 $（this）.closest（'。click1'）。find（'。smalldesc，.bigdesc'）。toggleClass（'smalldesc bigdesc'）; 
}）; 
  

解决方案

这是现代浏览器的css解决方案。 （IE10及更高版本）

document.querySelector（'a'）。addEventListener （'click'，function（）{document.querySelector（'。smalldesc'）。classList.toggle（'expand'）;}）;

  .smalldesc {max-height：52px;溢出：隐藏; transition：all .3s ease;}。smalldesc.expand {max-height：250px;}  

 < div class =service-1 click1> < div class =row> < div class =medium-12 small-12 columns smalldesc> < p class =font16> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < a href =＃>了解详情< / a> < / div>< / div>  

< hide =falsedata-console =falsedata-babel =false>

  #expend {display：none; } #expend + .smalldesc {max-height：52px;溢出：隐藏;过渡：所有.3s缓解;}＃支出：已检查+ .smalldesc {max-height：250px; } label {color：blue;文字装饰：下划线; cursor：pointer;} label：hover {text-decoration：none; }  

 < div class =service-1 click1 >< div class =row> < input type =checkboxid =expend/> < div class =medium-12 small-12 columns smalldesc> < p class =font16> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近使用包括版本的Lorem Ipsum在内的Aldus PageMaker等桌面出版软件而得到了推广。 < / p为H. < / DIV> < / /><标签代码=费用>阅读更多资讯< / label>< / div>< / div> 

更新：关于 max-height 的好处是你不知道确切的高度。如果元素的高度小于 max-height 属性的值，那么元素仍然会获得正确的高度。 max-height 属性只是限制顶部的高度。

请记住，您不能将 max-height 设置为 10000px 为例。我的意思是，你可以，但你不应该。

1. 当您点击链接后，动画将如此之快。


2. 现在 max-height 是 10000px 。再次单击时，您将看不到切换的效果，直到它小于 div 。换句话说，在您点击后，一段时间内不会发生任何事情。
   
   
   

   b $ b

     document.querySelector .smalldesc'）。classList.toggle（'expand'）;}）;  

     .smalldesc {max-height：52px;溢出：隐藏; transition：all 1s ease;}。smalldesc.expand {max-height：10000px;}  

    < div class =service-1 click1> < div class =row> < div class =medium-12 small-12 columns smalldesc> < p class =font16> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是业界标准的虚拟文本，当时一台未知的打印机采用了一种类型的厨房，并将其制作成样本书。它不仅存活了五个世纪，而且还实现了电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的桌面出版软件（如Aldus PageMaker，包括Lorem Ipsum的版本）而得到推广。< / p> < / DIV> < a href =＃>了解详情< / a> < / div>< / div>  

   最高元素的值 max-height 可以不再。如果差距不是太高，你不会感觉到问题。

   
   

   I am trying to expand a div with speed/smooth animation. Right now div expands with sudden change, my requirement is to give smooth animation while expanding.

   Fiddle code:

   http://jsfiddle.net/Sharan_thethy/pnjpj3uo/3/

   $('.click1').find('a[href="#"]').on('click', function (e) {
     e.preventDefault();
     this.expand = !this.expand;
     $(this).text(this.expand ? "Hide Content" : "Read More");
     $(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc');
   });
   

   解决方案

   This is a css solution for modern browsers. (IE10 and higher)

   document.querySelector('a').addEventListener('click', function() {
     document.querySelector('.smalldesc').classList.toggle('expand');
   });

   .smalldesc {
     max-height: 52px;
     overflow: hidden;
     transition: all .3s ease;
   }
   
   .smalldesc.expand {
     max-height: 250px;
   }

   <div class="service-1 click1">
     <div class="row">
       <div class="medium-12 small-12 columns smalldesc">
         <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
           It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
           desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
           unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
           the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
       </div>
       <a href="#">Read More</a>
     </div>
   </div>

   Or, even better, using css only:

   #expend {
     display:none;  
   }
   
   #expend + .smalldesc {
     max-height:52px;
     overflow:hidden;
     transition:all .3s ease;
   }
   
   #expend:checked + .smalldesc {
     max-height:250px;  
   }
   
   label {
     color:blue;
     text-decoration:underline;
     cursor:pointer;
   }
   
   label:hover {
     text-decoration:none;  
   }

   <div class="service-1 click1">
   <div class="row">
     <input type="checkbox" id="expend" />
     <div class="medium-12 small-12 columns smalldesc">
     <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
       </p>
     </div>
     <label for="expend">Read More</label>
   </div>
   </div>

   Update: The great thing about max-height is that you haven't to know the exact height. if the element's height smaller than the value of the max-height property, the element still will get the right height. The max-height property just limit the height from the top.

   Keep it in your mind that you can't just set the max-height to 10000px for example. I mean, you can but you shouldn't.

   1. After you click on the link once the animation will be so fast.
   2. Right now the max-height is 10000px. When you click again, you can't see the effect of the toggle until it will be less than the height of the div. In other words, after you click, nothing will not happen in some time.

   Example:

   document.querySelector('a').addEventListener('click', function() {
     document.querySelector('.smalldesc').classList.toggle('expand');
   });

   .smalldesc {
     max-height: 52px;
     overflow: hidden;
     transition: all 1s ease;
   }
   
   .smalldesc.expand {
     max-height: 10000px;
   }

   <div class="service-1 click1">
     <div class="row">
       <div class="medium-12 small-12 columns smalldesc">
   
         <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
           It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
           desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
           unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
           the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
       </div>
       <a href="#">Read More</a>
     </div>
   </div>

   So, set the value of max-height to the tallest element could be, no more. If the gap is not too high, you will not feel a problem.

   这篇关于用流畅的动画展开div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！