javascript - 通过流畅的动画单击展开 div

Question

我正在尝试使用快速/流畅的动画扩展一个 div。 现在div膨胀突然变化，我的要求是膨胀的时候动画流畅。

fiddle 代码:

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

Answer 1

这是一个适用于现代浏览器的 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>

或者，更好的是，仅使用 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>

更新:max-height 的优点在于您不必知道确切的高度。如果元素的高度小于 max-height 属性的值，元素仍然会获得正确的高度。 max-height 属性只是限制距顶部的高度。

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

1. 当你点击链接后，动画会非常快。
2. 现在 max-height 是 10000px。当你再次点击时，你将无法看到 toggle 的效果，直到它小于 div 的高度。也就是说，点击之后，一段时间内什么都不会发生。

例子:

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>

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

按照@rolinger 的评论，作为妥协，您可以获得元素的原始高度(scrollHeight)并将其存储在一个css 变量中。 max-height 将该变量作为 max-height。

const smalldesc = document.querySelector('.smalldesc');
smalldesc.style.setProperty('--originalHeight', `${smalldesc.scrollHeight}px`);

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

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

.smalldesc.expand {
  max-height: var(--originalHeight);
}

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