stevenhaskell/What_Are_You_Lifting_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animation script for plates -- In progress

Browse Source 
Added animation script for plates. It will animate the plates when adding the plates and removing them but not when updating the weight. Need to figure out how to step the animation.
This commit is contained in:
Steven Haskell
2018-10-23 01:46:24 -04:00
parent 3e033e8978
commit 6df908b04a
2 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/appstyling-v2.css
View File

@@ -138,15 +138,17 @@ p.subheading {
.b-platevisual__plates--left{
top: 50%;
transform: translate(-100%, -50%);
left: 21%;
flex-direction: row-reverse;
left: -16%;
flex-direction: row-reverse;
opacity: 0;
}
.b-platevisual__plates--right{
top: 50%;
transform: translateY(-50%);
left: 79%;
left: 116%;
opacity: 0;
}
.b-platevisual__plate{

48
js/Weight Calculation Script-Edited-Jquery-V4.js
View File

@@ -84,8 +84,43 @@
}
}
//replaces html for plates required to bar.
jQuery(".b-platevisual__plates").html(weighthtml);
//replaces and animates html for plates required to bar.
//if statment works but need to figureout how to step animation.
if (jQuery('.b-platevisual__plate').length > 0) {
console.log("Test")
//animates plates off
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-16%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 0,
left: "116%",
}, {duration: 500, queue: false });
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
} else {
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
}
}
//Smooth Scrolling
@@ -129,7 +164,14 @@
jQuery(".b-infoentry__reset").click(function(){
jQuery(".input-weight, .input-weightsneeded").val('');
jQuery(".input-final, .input-difference").html('0');
jQuery(".b-platevisual__plates").html('');
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-16%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 0,
left: "116%",
}, {duration: 500, queue: false });
jQuery(".b-infoentry__reset, .b-platevisual__weightfinal, .b-platevisual__weightdifference").hide();
});