jquery - 动画或过渡在溢出属性中不起作用

Question

我在溢出属性中提供了 4s 的过渡，但它不起作用。我正在使用 css 和 jquery 创建“显示更多”、“显示更少”。现在，当我点击显示更多时，overflow:visible 正在显示，但没有任何过渡。

CSS:

$("#more").click(function() {
	$(".a").css("overflow","visible");
	$(".a").css("-webkit-transition","height 4s");
	$(".a").css("transition","height 4s");
	$("#less").show();
	$("#more").hide();
}); 
        						
$("#less").click(function() {
	$(".b").css("overflow","hidden");
	$("#more").show();
	$("#less").hide();
});

    .a {
    	position: relative;
    	padding: 20px;
    	border: 1px solid black;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	max-height: 387px;
    	overflow: hidden;
    }
    
    .b {
    	position: relative;
    	min-height: 50px;
    	border: 1px solid #aaa;
    	margin-bottom: 2px;
    	padding: 10px;
    	-webkit-box-sizing: border-box;
    	        box-sizing: border-box;
    	text-align: center;
    	overflow: hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    		<div class="b"></div>
    	</div>
    	<p id="more">See More</p>
    	<p id="less">See Less</p>

你们能帮帮我吗？

Answer 1

尝试将动画应用于 maxHeight 而不是溢出。

$("#more").click(function() {
  $(".a").animate({
    maxHeight: "600px"
  }, 4000);
  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  $(".a").animate({
    maxHeight: "387px"
  }, 4000);
  $("#more").show();
  $("#less").hide();
});

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-height: 387px;
  overflow: hidden;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>

showLess();

$("#more").click(function() {

  $(".a .b").removeAttr("style");

  $("#less").show();
  $("#more").hide();
});

$("#less").click(function() {
  showLess();
  $("#more").show();
  $("#less").hide();
});

function showLess() {
  var len = $(".a .b").length;

  for (var i = 5; i < len; i++) {
    $($(".a .b")[i]).css({
      "font-size": 0,
      padding: 0,
      border: 0,
      height: 0,
      width: 0,
      "min-height": 0
    });
  }
}

.a {
  position: relative;
  padding: 20px;
  border: 1px solid black;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.b {
  position: relative;
  min-height: 50px;
  border: 1px solid #aaa;
  margin-bottom: 2px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  transition: all 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>
<p id="more">See More</p>
<p id="less">See Less</p>