NotDotTeam/anxiety
NotDotTeam
/
anxiety
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

animate choices with css transitions

This commit is contained in:
spaciecat 2019-09-12 17:51:08 +10:00
parent 45e3f27c79
commit 35495207c7
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/game/Game.js
View File

@ -344,7 +344,7 @@ Game.WORDS_HEIGHT_BOTTOM = -1;
wordsObserver.watch(function(){ return Game.FORCE_TEXT_Y }); wordsObserver.watch(function(){ return Game.FORCE_TEXT_Y });
wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM }); wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM });
wordsObserver.watch(function(){ return Game.wordsDOM.children.length }); wordsObserver.watch(function(){ return Game.wordsDOM.children.length });
Game.updateText = function() { wordsObserver.tick() }; Game.updateText = function() { wordsObserver.tick() };
})() })()
// CLEAR TEXT // CLEAR TEXT
@ -811,12 +811,12 @@ Game.executeChoice = function(line){
} }
// Add choice, animated! // Add choice, animated!
div.style.top = "150px"; div.classList.add("hidden");
Game.choicesDOM.appendChild(div); Game.choicesDOM.appendChild(div);
setTimeout(function(){ requestAnimationFrame(function(){
div.style.top = "0px"; div.classList.remove("hidden");
sfx("ui_show_choice", {volume:0.4}); sfx("ui_show_choice", {volume:0.4});
},10); });
// Or... FORCE // Or... FORCE
if(Game.OVERRIDE_FONT_SIZE){ if(Game.OVERRIDE_FONT_SIZE){

15
styles/game.css
View File

@ -973,7 +973,7 @@ DIALOGUEZ
text-align: center; text-align: center;
} }
#game_choices > div{ #game_choices > div {
width: 310px; width: 310px;
margin: 0 auto 5px auto; margin: 0 auto 5px auto;
@ -985,11 +985,11 @@ DIALOGUEZ
border-radius: 20px; border-radius: 20px;
/* Spring OUT only */ /* Spring OUT only */
-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ -webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); -webkit-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
-moz-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); -moz-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
-o-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); -o-transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ transition: transform 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); -webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
@ -997,6 +997,9 @@ DIALOGUEZ
-o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); -o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */ transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
} }
#game_choices > div.hidden {
transform: translateY(150px);
}
#game_choices > div > * { #game_choices > div > * {
pointer-events: none; /* so italics and stuff doesn't trigger sound */ pointer-events: none; /* so italics and stuff doesn't trigger sound */
} }