Display Build and Spell only if the build is calculated; fade in all objects on build calculate

This commit is contained in:
dr-carlos 2021-01-14 12:43:41 +10:30
parent 5169c9a934
commit 3460591a20
5 changed files with 76 additions and 9 deletions

View file

@ -427,8 +427,11 @@ function calculateBuild(save_skp, skp){
}
document.getElementById("level-choice").value = level;
for (let i of document.getElementsByClassName("hide-container")) {
i.style.visibility = "visible";
for (let i of document.getElementsByClassName("hide-container-block")) {
i.style.display = "block";
}
for (let i of document.getElementsByClassName("hide-container-grid")) {
i.style.display = "grid";
}
console.log(equipment);

View file

@ -105,9 +105,9 @@ function displaySetBonuses(build, parent_id) {
parent_div.append(set_summary_elem);
if (build.activeSetCounts.size) {
parent_div.parentElement.style.visibility = "visible";
parent_div.parentElement.style.display = "block";
} else {
parent_div.parentElement.style.visibility = "hidden";
parent_div.parentElement.style.display = "none";
}
for (const [setName, count] of build.activeSetCounts) {

View file

@ -388,13 +388,13 @@
</div>
</div>
</div>
<div class="build-overall-container hide-container" style="visibility: hidden;">
<div class="build-overall-container hide-container-block" style="display: none;">
<div class = "center build-overall" id = "build-overall">
<br/>
<div class = "center" id = "build-overall-stats"></div>
</div>
</div>
<div class="spell-info-container hide-container" style="visibility: hidden;">
<div class="spell-info-container hide-container-block" style="display: none;">
<div class="spell-info">
<div class="center" id="build-melee-statsAvg">melee</div>
</div>
@ -492,7 +492,7 @@
Update Stats
</button>
</div>
<div class = "build">
<div class = "build hide-container-grid" style="display: none;">
<div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">
<div class = "center" id = "build-helmet-stats"></div>
</div>
@ -527,7 +527,7 @@
<div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-item-12">
</div>
</div>
<div class = "spells">
<div class = "spells hide-container-grid" style="display: none;">
<div class = "center spell-info" id = "spell0" style = "grid-item-1">
<!--div class = "center" id = "spell0-name">Spell 1</div-->
<div class = "center" id = "spell0-info">Spell 1</div>
@ -546,7 +546,7 @@
</div>
</div>
<div class="misc">
<div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; visibility: hidden;">
<div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1; display: none;">
<div class = "center" id = "set-info">Set info</div>
</div>
</div>

View file

@ -33,3 +33,35 @@
.skp-input {
}
.hide-container-block {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.hide-container-grid {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.set-info-div {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View file

@ -30,3 +30,35 @@
.skp-input {
}
.hide-container-block {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.hide-container-grid {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
.set-info-div {
animation-duration: 0.5s;
animation-name: fadeInFromNone;
animation-fill-mode: forwards;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 1;
}
}