Communicating in English is a bit challenging for me, so I may struggle to provide clear explanations. Nonetheless, I will do my best to articulate my thoughts. Please accept my sincere apologies for any confusion.
I am currently working on implementing a thumbnail-to-fullscreen transition effect. Similar to the one seen on Google Photos, when a thumbnail is clicked, it should expand to fullscreen view with a smooth animation.
Here's my approach: Upon clicking a thumbnail, I create a duplicate (clone) of that element. Next, I apply initial styles to the clone (such as top, left, width, and height) to match those of the original element. Then, I add a specific CSS class to the clone that positions it correctly for the full expanding effect (setting width to 100vw, height to 100vh, top to 0, left to 0, and position to fixed using the ".fullscreen" class). I found some inspiration from this example.
However, while setting these styles,
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
This method inadvertently overrides the top, left, height, and width attributes of all child elements within the clone, even if they have their own classes set. It also fails to trigger the "fullscreen" class behavior. Consequently, the transformation or expansion effect does not occur, and the clone retains its original style. If I omit setting these styles, the transform animation will not be properly applied.
How can I successfully achieve a fullscreen expand transform animation? Is there a more effective solution available? Or is there a way to define an element's initial style without interfering with additional classes added via JavaScript?
Once again, I sincerely apologize for any language barriers. I have put forth my best effort to convey my ideas accurately.
By the way, I'm puzzled as to why element.style is not functioning in the code snippet provided.
function handler(element)
{
var type = element.getAttribute("data-type")
switch(type)
{
case "image":
transition_fullscreen(element);
break;
default:
break;
}
}
function transition_fullscreen(element)
{
var img = element.getElementsByClassName('el_view')[0];
var rect = img.getBoundingClientRect();
var clone = img.cloneNode(true);
clone.style.top = rect.top;
clone.style.left = rect.left;
clone.style.height = img.offsetHeight
clone.style.width = img.offsetWidth
clone.classList.add('fullscreen');
var ap = document.getElementById('form').appendChild(clone);
}#form
{
width: 100%;
text-align:center;
}
#form .element
{
display:inline-block;
float:left;
width: 10%;
height: 20%;
margin: 1.9em;
cursor: default;
transition: background .1s ease-in-out;
animation:animatezoom 0.5s;
}
#form .highlight
{
padding:14px;
transition: transform .1s ease-out;
padding-top:auto;
/*border: 1px solid #ddd;
border-radius: 4px;*/
}
#form .highlight:hover { transform: translateY(-0.5rem) scale(1.0125);
box-shadow: 0 0.5em 1.9rem -1rem rgba(0,0,0,0.5); }
#form .highlight:active { transform:scale(0.8); }
#form .el_img { max-height: 124px; vertical-align: middle; }
#form .el_img img { max-width: 88px; max-height: 124px; margin-top: 5%; border-radius:5px; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); border-radius:5px;
opacity: 1;
transition: all 3s;
}
#form .el_img .fullscreen
{
z-index:9999;
max-width:100vw;
max-height:100vh;
width:100vw;
height:100vh;
position:fixed;
top:1%;
left:1%;
transition: all 3s;
}<div id="form">
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/oKsgcsHtHu_nIkpNd-mNCAyzUD8xo68laRPOfvFuO0hqv6nDXVNNjEMmoiv9tIDgTj8=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
somefile.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/hYQO8ekNvsPWMSzMe6IZdCAT6p8qq-SlzA0jiZstV7qBcWg5kn-39qHY0ZaBPqd3usc=w170">
</div>
<div id="el_name#somefile.exe" class="el_name">
blahblah.exe
</div>
</div>
</div>
</div>
<div id="element#somefile.exe" class="element" data-type="image" data-link="somefile.exe" onclick=handler(this); title="somefile.exe">
<div id="highlight#somefile.exe" class="highlight">
<div id="content#somefile.exe" class="content">
<div id="el_img#somefile.exe" class="el_img">
<img id="view#somefile.exe" class="el_view" src="https://lh3.googleusercontent.com/UMB2HRRRAAzXAEaCM9Gg-baCaDx_1RTXHscW5k2Ge3P4KP4mwTt2m6oyEHBWex3c4SxU=w300">
</div>
<div id="el_name#somefile.exe" class="el_name">
mehhhhh.cool
</div>
</div>
</div>
</div>
</div>