Css 过渡不适用于 child 元素

Question

我目前面临以下问题。我有一个 <section> 元素，它有一些 <div> 作为 children。 <section>的高度设置为parent的百分比div，<div>的高度也设置为<section>的百分比.

我正在使用 Jquery 将 class 添加到 <section> 以便在两个高度之间转换。问题是 children 没有更新它们的高度。

我不想使用旧的 display: none 和 removeAttr("style") 技巧来刷新 css，因为我也希望将过渡应用于 children。

我画了几个草图来帮助理解这个问题。

初始状态过渡后

编辑

<section> 标签在初始状态下具有以下 classes： fullWidth halfHeight expandableTransition

.fullWidth {
  width: 100%;
}

.halfHeight {
  height: 48%;
}

.expandableTransition {
  -webkit-transition: height 1s; /* Safari */
  transition: height 1s;
}

children <div> 的 CSS 是：

.myDiv {
  border: 1px solid;
  height: 82%;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
}

Jquery添加的class为了过渡到新的高度很简单：

.expandedSection {
  height: 96%;
}

添加 class 的 Jquery 代码如下：

function expandSection() {
    $("#prioritySection").toggleClass("expandedSection");
}

Answer 1

我认为您使用更多类动画

希望对您有所帮助

fiddle 到这里 https://jsfiddle.net/rameezrami/1axvcoeh/3/

<html>
<head>
<style>
.fullWidth {
  width: 100%;background: green;
  height: 48%;
}

.myDiv {
  border: 1px solid;
  height: 82%;
  width: 300px;
  display: inline-block;
  vertical-align: middle;
  background: red;
}

.expandedSection {
  height: 96%;
  -webkit-transition: height 1s; /* Safari */
  transition: height 1s;
}
</style>
</head>
<body>
<section class="fullWidth">

<div class="myDiv"></div>
<div class="myDiv"></div>
</section>
<input type="button" onclick="expandSection();" value="click to expand">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function expandSection() {
    $(".fullWidth").toggleClass("expandedSection");
}
</script>
</body>
</html>

Answer 2

您的代码有效。看到这个 fiddle:

http://jsfiddle.net/rLuc3fht/

如果您点击正文，您可以查看转换。我只添加了

 html , body { height: 100%; }

Css 过渡不适用于 child 元素

Css transition not applying in child elements

html

css

jquery

css-transitions