Javascript 单击以平滑动画展开 div

Expand div on click with smooth animation

提问by Sharanpreet

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.

我正在尝试使用速度/平滑动画扩展 div。现在div随着突然变化而扩展，我的要求是在扩展时提供流畅的动画。

Fiddle code:

小提琴代码：

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

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');
});

回答by Mosh Feu

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

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

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 cssonly:

或者，更好的是，css仅使用：

#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-heightis that you haven't to know the exact height. if the element's height smaller than the value of the max-heightproperty, the element still will get the right height. The max-heightproperty just limitthe height from the top.

更新：最棒的max-height是你不必知道确切的高度。如果元素的高度小于max-height属性的值，元素仍然会得到正确的高度。该max-height属性仅限制从顶部的高度。

Keep it in your mind that you can't just set the max-heightto 10000pxfor example. I mean, you can but you shouldn't.

保持它在你的心中，你不能只设置max-height到10000px例如。我的意思是，你可以，但你不应该。

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

1. 单击链接后，动画将变得如此之快。
2. 现在max-height是10000px。再次单击时，toggle直到小于div. 换句话说，在您点击之后，一段时间内不会发生任何事情。

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-heightto the tallest element could be, no more. If the gap is not too high, you will not feel a problem.

因此，将 的值设置为max-height最高的元素即可，仅此而已。如果差距不是太高，你不会觉得有问题。

回答by tremor

What you are looking for may be the "easing" argument defined in the JQueryUI ToggleClass API:

您正在寻找的可能是 JQueryUI ToggleClass API 中定义的“缓动”参数：

http://api.jqueryui.com/toggleClass/

http://api.jqueryui.com/toggleClass/

There is also a duration that you can specify using toggle class. This should be what you are looking for.

您还可以使用切换类指定持续时间。这应该是你正在寻找的。

Edit: This method requires JQuery UI to be loaded...

编辑：此方法需要加载 JQuery UI...

I updated your Fiddle adding JQuery UI and one little extra argument to toggleClass: https://jsfiddle.net/pnjpj3uo/13/

我更新了你的 Fiddle，添加了 JQuery UI 和一个额外的参数 to toggleClass：https: //jsfiddle.net/pnjpj3uo/13/

$('.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', 1000, 'swing');});

回答by Harsh Sanghani

I have some solution for you, But in that case you can not set hieght to auto, you can do following, replace you jquery code with these :-

我为您提供了一些解决方案，但是在这种情况下，您无法将 hieght 设置为自动，您可以执行以下操作，用以下内容替换 jquery 代码：-

$('.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').animate({
        "height": "400px"
    }, "slow");  
});

It may help you.

它可能会帮助你。

回答by Christopher Ramírez

The CSS specification does not define a method to animate the height or width of an element from an absolute value to auto. This is because the browser can't not easily/cheaply mathematically calculate the real value of autowhen doing expanding animation.

CSS 规范没有定义将元素的高度或宽度从绝对值动画化到 的方法auto。这是因为浏览器无法轻松/廉价地以数学方式计算展开auto动画时的实际值。

Most expanding or contracting animation involving autorely on Javascript. What they do is set the height or width to auto, then get new element height and apply an animation using the obtained value.

大多数扩展或收缩动画auto都依赖于 Javascript。他们所做的是将高度或宽度设置为auto，然后获取新元素的高度并使用获得的值应用动画。

I've updated your jsfiddle to show what I'm telling you. http://jsfiddle.net/pnjpj3uo/14/

我已经更新了您的 jsfiddle 以显示我在告诉您的内容。http://jsfiddle.net/pnjpj3uo/14/

回答by Charles

I think what you are looking for is to change your toggle handler to fadeIn()or fadeOut().

我认为您正在寻找的是将切换处理程序更改为fadeIn()或fadeOut()。

In the parenthesis, define the time (default is ms I believe) for the transition.

在括号中，定义转换的时间（我认为默认是毫秒）。

This is handling elements. To handle classes your code on fiddle may work with some css3 transitions although it may not be best practice due to browser compatibility:

这是处理元素。要处理类，您在 fiddle 上的代码可能适用于某些 css3 转换，尽管由于浏览器兼容性，这可能不是最佳实践：

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;