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

15
styles/game.css
View File

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