Question

I'm currently facing the following problem. I have a <section> element that has some <div> as children. The height of the <section> is set as a percentage of the parent div, and the <div>'s height is also set as a percentage of the <section>.

I'm using Jquery to add a class to the <section> in order to transition between two heights. The problem is that the children aren't updating their height.

I don't want to refresh the css using ye olde display: none and removeAttr("style") trick since I want the transition to be applied to the children too.

I've made a couple of sketches to help understand the problem.

Initial state After the transition

EDIT

The <section> tag has the following classes at initial state: fullWidth halfHeight expandableTransition

.fullWidth {
  width: 100%;
}

.halfHeight {
  height: 48%;
}

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

The CSS for the children <div> is:

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

The class added by Jquery in order to transition to the new height is as simple as:

.expandedSection {
  height: 96%;
}

The Jquery code that adds the class is the following:

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

Answer 1

i think you are using bit more classes for animation

i hope this helps

fiddle goes here 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

Your code works. See this fiddle:

http://jsfiddle.net/rLuc3fht/

If you make click on the body you can view the transition. I've only added

 html , body { height: 100%; }

Css transition not applying in child elements

2 个答案: