הנושאים החמים
הנושאים החמים
this.pointer
משתמש רשום
שלום,
אשמח לעזרה.
יש לי div שמכיל כמה divs שה - position שלהם הוא אבסולוטי.
בתחילה הם מוצגים אחד על השני.
בלחיצה על הערימה ה- position הופך ל - relative (ע"י הוספת class ב- Typescript) והם נפתחים - מוצגים אחד ליד השני.
השאלה היא איך עושים את זה עם transition - שתהיה לפתיחה תנועה חלקה?
לפי מה שהבנתי - ל absolute בלתי אפשרי עם transition.
קישור ל- codepen.
קוד:
תודה רבה על כל רעיון!
אשמח לעזרה.
יש לי div שמכיל כמה divs שה - position שלהם הוא אבסולוטי.
בתחילה הם מוצגים אחד על השני.
בלחיצה על הערימה ה- position הופך ל - relative (ע"י הוספת class ב- Typescript) והם נפתחים - מוצגים אחד ליד השני.
השאלה היא איך עושים את זה עם transition - שתהיה לפתיחה תנועה חלקה?
לפי מה שהבנתי - ל absolute בלתי אפשרי עם transition.
קישור ל- codepen.
קוד:
JavaScript:
function open()
{
var div = document.getElementsByClassName('outer')[0];
for(let i=0; i<div.childElementCount; i++)
{
div.children[i].classList.add('open');
}
};
HTML:
<div id="out" class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer
{
transition: all 1s ease-in-out;
display: flex;
}
.inner
{
width: 100px;
height: 100px;
background-color: #588765;
margin: 3px;
position: absolute;
border: 3px solid #030f10;
cursor: pointer;
}
.inner:nth-child(2)
{
transform: rotate(-13deg);
}
.inner:nth-child(3)
{
transform: rotate(10deg);
}
.open
{
position: relative;
}
