转换分区 [英] Transition in div
问题描述
现在，当我点击任何一个盒子时，它会从左向右扩展并获得完整宽度，其他盒子将堆放在下一行。我想要的是当我点击红框时，该框必须从左到右与其余框重叠。
同样，当我点击绿色框时，它必须从其两侧展开，并重叠左侧和右侧的两个框并获得全宽。同样，当我点击蓝色框时，它必须从左侧展开并填充与其余框重叠的宽度。
任何人都可以帮我吗？
我的代码是：
< HTML>
< head>
< title>转换< /标题>
< style type =text / css>
.box {
width：30％;
height：200px;
margin：10px;
float：left;
}
#first {
background-color：red;
}
#second {
background-color：green;
}
#third {
background-color：blue;
}
< / style>
< / head>
< body>
< div class =container>
< div id =firstclass =box>< / div>
< div id =secondclass =box>< / div>
< div id =thirdclass =box>< / div>
< / div>
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script>
< script type =text / javascript>
$（function（）{
var containerWidth = $（。container）。width（）;
$（。box）。click（function（）{$ b $ （$$）;
（$）; $ b}）;
< / script>
< / body>
< / html>
过渡 transform：scale（），这将允许元素扩展其他元素。你可以通过js为该属性分配一个类来转换，你可以在纯CSS中做到这一点。并且由于每个元素的宽度都是20％，所以转换 scaleX（5）应该是100％。并使用 transform-origin 来更改元素从哪个方向展开。
var containerWidth = $（。container）。width（）; $（。box）。click（function（）{var id = $（this）.attr （id）; $（this）.addClass（'scale'）;}）;
.box {width：20％; height：200px; margin：10px;向左飘浮;转换：转换.5s; transform-origin：0 0;}＃first {background-color：red;}＃second {background-color：green; transform-origin：center center;}＃third {background-color：blue; transform-origin：100％0;} scale {transform：scaleX（5）;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div类= 容器 > < div id =firstclass =box>< / div> < div id =secondclass =box>< / div> < div id =thirdclass =box>< / div>< / div>
虽然如果元素在父元素中间隔均匀，这种效果会更好，然后它们会重叠并均匀地填充父元素。使用 display：flex;在父母上启用了 $ justify-content：space-between; data-hide =falsedata-console =truedata-babel =false>
var containerWidth = $（。container）.width（）; $（。box）。click（function（）{var id = $（this）.attr（id）; $（this）.addClass（'scale'）;}）;
.container {display：flex; justify-content：space-between;}。box {width：20％; height：200px;转换：转换.5s; transform-origin：0 0;}＃first {background-color：red;}＃second {background-color：green; transform-origin：center center;}＃third {background-color：blue; transform-origin：100％0;} scale {transform：scaleX（5）;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div类= 容器 > < div id =firstclass =box>< / div> < div id =secondclass =box>< / div> < div id =thirdclass =box>< / div>< / div>
I have three different boxes in same row. I want transition in those boxes when clicked inside the box. Right now when i click on any box it will expand from left to right and get full width and other boxes are stacked in next row. What i want is when i click red box the that box must expand from left to right overlapping the remaining boxes. Similarly when i click the green box, it must expand from both its side and overlap both boxes in left and right side and get full width. Similarly when i click blue box it must expand from left side and fill the width overlapping the remaining boxes. Can any one please help me?
My Code is :
<html>
<head>
<title>Transition</title>
<style type="text/css">
.box {
width:30%;
height: 200px;
margin: 10px;
float:left;
}
#first {
background-color: red;
}
#second {
background-color: green;
}
#third {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$("#"+id).animate({width: "100%"});
});
});
</script>
</body>
</html>
Transition transform: scale(), and that will allow the element to expand over the others. You can just assign a class via js for that property to transition and you can do that in pure CSS. And since each element is 20% wide, transitioning scaleX(5) would be 100%. And use transform-origin to change which direction the elements expand from.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.box {
width:20%;
height: 200px;
margin: 10px;
float:left;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
Though this effect would work a lot better if the elements were evenly spaced within the parent, then they will overlap and fill the parent evenly. Using display: flex; justify-content: space-between; on the parent enables that.
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: center center;
}
#third {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
这篇关于转换分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
