我目前面临以下问题。
我有一个 <section>元素有一些 <div>作为 child 。
<section> 的高度设置为父 div 的百分比，<div>的高度也设置为 <section> 的百分比.
我正在使用 Jquery 向 <section> 添加一个类为了在两个高度之间过渡。问题是 children 没有更新他们的高度。
我不想使用 ye olde display: none 刷新 css和 removeAttr("style")技巧，因为我也希望将过渡应用于 child 。
我画了几个草图来帮助理解这个问题。
初始状态
过渡后
- 编辑
<section>标签在初始状态下具有以下类:
fullWidth halfHeight expandableTransition
.fullWidth {
width: 100%;
}
.halfHeight {
height: 48%;
}
.expandableTransition {
-webkit-transition: height 1s; /* Safari */
transition: height 1s;
}
child 的 CSS <div>是:
.myDiv {
border: 1px solid;
height: 82%;
width: 300px;
display: inline-block;
vertical-align: middle;
}
Jquery为了过渡到新的高度添加的类很简单:
.expandedSection {
height: 96%;
}
添加类的Jquery代码如下:
function expandSection() {
$("#prioritySection").toggleClass("expandedSection");
}
最佳答案
我认为你使用了更多的动画类
希望对你有帮助
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>
关于jquery - Css 过渡不适用于子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33669741/