我有一个父div,它包含4个相等的div(每个25%),并排水平并排,包含一个图像。我希望div在单击时扩展,以便div设置动画以覆盖整个父div(宽度为100%)。然后在图像上方添加一些动画效果。
我正在尝试通过CSS中的flex框执行此操作,但是即使单击的div扩展了,它也无法覆盖整个父div。其余3格缩小,但不会完全消失。
我还尝试通过Javascript来实现此目的,方法是添加属性display:所有其他div都不添加。但是,这不允许我添加任何动画。
<div class="expand-column-wrapper">
<div class="expanded-column">
<h3 class="expand-column-header">Sustainable
Living</h3>
<p class="expand-column-content">Hello there.</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Protecting Society</h3>
<p class="expand-column-content">If you hover</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Health and Wellness</h3>
<p class="expand-column-content">over each section</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Digital Communities</h3>
<p class="expand-column-content">over each section</p>
</div>
</div>
$white: white;
$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;
.customDisplay{
display: none !important;
}
.expand-column-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.expanded-column {
padding: 1rem;
flex: 1 1 5%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: $expand-column-transition;
&:hover{
cursor: pointer;
}
}
.expand-column-header, .expand-column-content {
color: $white;
}
.expand-column-header {
width: 100%;
text-align: center;
}
.expand-column-content {
font-weight: bold;
opacity: 0;
flex-basis: 1%;
}
}
.tempClass{
flex-basis: $expand-column-hover-width;
.expand-column-content {
opacity: 1;
flex-basis: 50%;
transition: $expand-column-transition;
}
}
.expand-column-wrapper .expanded-column {
&:nth-of-type(1) {
background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(2) {
background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(3) {
background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(4) {
background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
}
$('.expanded-column').click(function (){
var listL = $('.expanded-column');
var listLen = listL.length;
for(i = 0; i < listLen; i++){
if(i != $(this).index()){
$(listL[i]).addClass("customDisplay");
}
else{
$(this).addClass("tempClass");
}
}
});
$('.expanded-column').mouseleave(function(){
$(this).removeClass("tempClass");
$('.expanded-column').removeClass("customDisplay");
});
答案 0 :(得分:1)
这可能是您正在寻找的东西,这是此https://jsfiddle.net/sandymizz/yfr0wpm5/的工作提琴。 我曾经将内部div的位置设置为绝对,而不是隐藏其他div,而是使它们的不透明度为0。
$('.expanded-column').click(function() {
var listL = $('.expanded-column');
var listLen = listL.length;
for (i = 0; i < listLen; i++) {
if (i != $(this).index()) {
$(listL[i]).toggleClass("customDisplay");
} else {
$(this).toggleClass("tempClass");
}
}
});
$('.expanded-column').mouseleave(function() {
$(this).removeClass("tempClass");
$('.expanded-column').removeClass("customDisplay");
});
$white: white;
$expand-column-transition: all 1s ease-in-out;
$expand-column-background-color: #2c3840;
$expand-column-hover-width: 100%;
$expand-column-fluid: true;
.customDisplay {
opacity: 0 !important;
}
.expand-column-wrapper {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.expanded-column {
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: $expand-column-transition;
position: absolute;
left: 0;
top: 0;
width: 25%;
box-sizing: border-box;
overflow: hidden;
opacity: 1;
background-position: center !important;
background-size: cover !important;
&:hover {
cursor: pointer;
}
&.tempClass {
width: $expand-column-hover-width;
z-index: 1;
left: 0 !important;
.expand-column-content {
opacity: 1;
flex-basis: 50%;
transition: $expand-column-transition;
}
}
}
.expand-column-header,
.expand-column-content {
color: $white;
}
.expand-column-header {
width: 100%;
text-align: center;
}
.expand-column-content {
font-weight: bold;
opacity: 0;
flex-basis: 1%;
}
}
.expand-column-wrapper .expanded-column {
&:nth-of-type(1) {
background: url('https://images.pexels.com/photos/2154/sky-lights-space-dark.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
}
&:nth-of-type(2) {
background: url('https://images.pexels.com/photos/113744/helix-nebula-ngc-7293-planetary-fog-constellation-aquarius-113744.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 25%;
}
&:nth-of-type(3) {
background: url('https://images.pexels.com/photos/2162/sky-space-dark-galaxy.jpg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 50%;
}
&:nth-of-type(4) {
background: url('https://images.pexels.com/photos/41951/solar-system-emergence-spitzer-telescope-telescope-41951.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
height: 100vh;
background-size: cover;
left: 75%;
}
}
<div class="expand-column-wrapper">
<div class="expanded-column">
<h3 class="expand-column-header">Sustainable Living
</h3>
<p class="expand-column-content">Hello there.</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Protecting Society</h3>
<p class="expand-column-content">If you hover</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Health and Wellness</h3>
<p class="expand-column-content">over each section</p>
</div>
<div class="expanded-column">
<h3 class="expand-column-header">Digital Communities</h3>
<p class="expand-column-content">over each section</p>
</div>
</div>