Question

我创建了一个＆＃34;阅读更多/少阅读＆＃34;用javascript的可折叠按钮，作者的生物描述，在我正在研究的wordpress网站上。

可折叠工作正常，但转换css效果不起作用。我已经对此进行了测试，我认为这是因为当我解开文本时，我将高度设置为＆＃34; auto＆＃34;，因为显然我不知道文本将会持续多长时间。 / p>

如果我将高度设置为数字，则转换有效。但我需要设置为自动。

这里是小提琴： https://jsfiddle.net/brsastre/jo29pfm8/

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: auto;
}

Answer 1

您无法转换为height: auto，其中一个最酷的技巧就是为max-height制作动画，以获得与height: auto相同的效果。

类似的东西：

＆＃13;

var button = document.getElementById("button");
button.onclick = function() {
  var text = document.getElementById("text");
  text.classList.add("uncollapsed");
};

＆＃13;

p {
  max-height: 30px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

p.uncollapsed {
  max-height: 100px;
}

＆＃13;

<p id="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem obcaecati tenetur voluptates asperiores vero necessitatibus incidunt magni beatae debitis. Libero error, ab. Debitis odit, nulla blanditiis obcaecati assumenda eveniet. Nesciunt. Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero provident beatae qui minima iusto, corrupti quidem nam iste alias dicta? Cupiditate quidem neque dolores distinctio quam commodi inventore provident.
</p>
<button id="button">button</button>

＆＃13;

Answer 2

您无法在＆＃34; auto＆＃34;的维度上进行动画制作。（不幸）。你应该使用高度来制作动画。这是解决方案：

p {
  height: 30px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
p.uncollapsed {
  height: 80px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

Answer 3

由于height: auto，这不会奏效。试试这个：

p {
   height: 30px;
   overflow: hidden;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

p.uncollapsed {
  height: 100px;
}

CSS过渡效果不起作用

3 个答案: