时间戳

首页 > 解决方案 > 缓入出在第一次运行时变得即时？

javascript - 缓入出在第一次运行时变得即时？

问题描述

我有这段代码，它不会缓和或缓和图像，而是立即显示它们？

但它似乎没有这样做？- 它立即出现？

为什么？

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<style>
.features-read-mode {
    position: relative;
    overflow: hidden;
    transition: max-height 21s ease-in-out;
    }
</style>

 <script>
 $('.js-feature').each(function()) {
    var self = $(this);
    var startPosition;
    var totalFeatures = self.children().length;
    var maxHeightBuffer = 500;

     function getMaxHeight() {
     var maxHeight = 0;
     for (var i = 0; i < totalFeatures; i++)
     {
         maxHeight += self.children().eq(i),height();
     }
     maxHeight += maxHeightBuffer;
     return maxHeight;
    }

    function expand() {
        setTimeOut(function() {
            self.css('max-height', getMaxHeight() + 'px');
        }, 1);
    }

    function collapse(startPos) {
        self.css('max-height', startPos + 'px');
    }

      self.find('.js-button-expand-collapse').on('click', function() {
      collapse(startPosition);

    } else {
      startPosition = self.height();
      self.addClass('features-read-more--expanded');
      expand();
    }
  });
 }
    </script>
</html>

该函数调用 expand ，然后更新转换应该缓入出的 maxHeight 值。这仅在执行一次后才有效。第一次执行不会缓入，而是立即进入最大高度？怎么来的？

标签： javascripthtmlcss

解决方案

推荐阅读