Hiding/Adding 元素与 jquery 并转换其余元素? (也许 css?)
Hiding/Adding element with jquery and transitioning the rest? (maybe with css?)
我不确定这是否可行。
我今天拥有的是 5 DIV,在单击它们上方的数字后,jQuery 将检查单击的数字和 fadeIn()
或 fadeOut()
框的数量。
我想要做的是当盒子四处移动时(因为 display: flex
和 justify-content: space-around
)它们有平滑的 transition
.
我尝试使用 css 转换来实现,但没有成功。
有人能帮帮我吗?
这是 JSFiddle:https://jsfiddle.net/0k1xj3d5/1/
HTML:
<div class="wrapper">
<div class="num" rel="1">1</div>
<div class="num" rel="2">2</div>
<div class="num" rel="3">3</div>
<div class="num" rel="4">4</div>
<div class="num" rel="5">5</div>
</div>
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
CSS:
.wrapper {
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}
[class^=box] {
width: 50px;
height: 50px;
background-color: blue;
}
.num {
width: 50px;
height: 50px;
background-color: green;
}
jQuery:
$('.num').on('click', function(){
var quant = $(this).attr('rel');
for(var i=1; i<=5 ;i++){
if(i <= quant){
if(!$('.box-' + i).is(':visible')){
$('.box-' + i).fadeIn();
}
} else {
$('.box-' + i).fadeOut();
}
}
});
我的方式 — https://jsfiddle.net/sergdenisov/qgyeay0v/10/:
HTML:
<div class="wrapper">
<div class="num" rel="1">1</div>
<div class="num" rel="2">2</div>
<div class="num" rel="3">3</div>
<div class="num" rel="4">4</div>
<div class="num" rel="5">5</div>
</div>
<div class="wrapper">
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
</div>
CSS:
.wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
justify-content: space-around;
margin-bottom: 50px;
}
.wrapper__item {
-webkit-flex: 0.00001;
flex: 0.00001;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 1s;
transition: all 1s;
}
.wrapper__item_shown {
-webkit-flex: 1;
flex: 1;
}
.box {
width: 50px;
height: 50px;
background-color: blue;
margin: 0 auto;
}
.num {
width: 50px;
height: 50px;
background-color: green;
}
JS:
$('.num').on('click', function(){
var quant = $(this).attr('rel');
var $wrapperItems = $('.wrapper__item');
for (var i = 1; i <= 5; i++) {
var $wrapperItem = $wrapperItems.eq(i - 1);
if (i <= quant) {
$wrapperItem.addClass('wrapper__item_shown');
} else {
$wrapperItem.removeClass('wrapper__item_shown');
}
}
});
我不确定这是否可行。
我今天拥有的是 5 DIV,在单击它们上方的数字后,jQuery 将检查单击的数字和 fadeIn()
或 fadeOut()
框的数量。
我想要做的是当盒子四处移动时(因为 display: flex
和 justify-content: space-around
)它们有平滑的 transition
.
我尝试使用 css 转换来实现,但没有成功。
有人能帮帮我吗?
这是 JSFiddle:https://jsfiddle.net/0k1xj3d5/1/
HTML:
<div class="wrapper">
<div class="num" rel="1">1</div>
<div class="num" rel="2">2</div>
<div class="num" rel="3">3</div>
<div class="num" rel="4">4</div>
<div class="num" rel="5">5</div>
</div>
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
CSS:
.wrapper {
display: flex;
justify-content: space-around;
margin-bottom: 50px;
}
[class^=box] {
width: 50px;
height: 50px;
background-color: blue;
}
.num {
width: 50px;
height: 50px;
background-color: green;
}
jQuery:
$('.num').on('click', function(){
var quant = $(this).attr('rel');
for(var i=1; i<=5 ;i++){
if(i <= quant){
if(!$('.box-' + i).is(':visible')){
$('.box-' + i).fadeIn();
}
} else {
$('.box-' + i).fadeOut();
}
}
});
我的方式 — https://jsfiddle.net/sergdenisov/qgyeay0v/10/:
HTML:
<div class="wrapper">
<div class="num" rel="1">1</div>
<div class="num" rel="2">2</div>
<div class="num" rel="3">3</div>
<div class="num" rel="4">4</div>
<div class="num" rel="5">5</div>
</div>
<div class="wrapper">
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
<div class="wrapper__item wrapper__item_shown">
<div class="box"></div>
</div>
</div>
CSS:
.wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
justify-content: space-around;
margin-bottom: 50px;
}
.wrapper__item {
-webkit-flex: 0.00001;
flex: 0.00001;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 1s;
transition: all 1s;
}
.wrapper__item_shown {
-webkit-flex: 1;
flex: 1;
}
.box {
width: 50px;
height: 50px;
background-color: blue;
margin: 0 auto;
}
.num {
width: 50px;
height: 50px;
background-color: green;
}
JS:
$('.num').on('click', function(){
var quant = $(this).attr('rel');
var $wrapperItems = $('.wrapper__item');
for (var i = 1; i <= 5; i++) {
var $wrapperItem = $wrapperItems.eq(i - 1);
if (i <= quant) {
$wrapperItem.addClass('wrapper__item_shown');
} else {
$wrapperItem.removeClass('wrapper__item_shown');
}
}
});