Having recently delved into the realm of website programming, I was able to make some adjustments to the CSS code of my Wordpress theme called Expositio (wpshower / themes / expositio).
One particular piece of code that caught my attention is what I believe to be a CSS Page Transition effect:
#wrapper {
width: 100%;
height: 100%;
min-height: 300px; /*added cos there's no content!*/
background-color: yellow; /*added for clarity*/
}
.site {
opacity: .5; /*adjusted from 0*/
position: relative;
min-width: 320px;
-webkit-transition: opacity 0.3s, left 0.3s ease-out;
-moz-transition: opacity 0.3s, left 0.3s ease-out;
-o-transition: opacity 0.3s, left 0.3s ease-out;
transition: opacity 0.3s, left 0.3s ease-out;
}
The HTML snippet related to this code can be found below:
<div class="site"> <!-- #page -->
<div id="wrapper"> <!-- #wrapper -->
<div class="main-content"> <!-- #main -->
<p>hello</p>
<span id="infinite-loader"> </span>
<span> [...] </span>
<span> [...] </span>
<span> [...] </span>
<!- Some PHP scripts can also be included here. --->
</div>
If you would like to see the full HTML structure and additional details, just let me know!
Sincerely appreciate any assistance with this matter – particularly in addressing the issue where clicking on a toggle link triggers the page transition animation while hiding the content.
Your support is greatly valued!