remove use of class list in actuator, fix animations for firefox
--- a/js/html_actuator.js
+++ b/js/html_actuator.js
@@ -44,24 +44,37 @@
var position = tile.previousPosition || { x: tile.x, y: tile.y };
positionClass = this.positionClass(position);
- element.classList.add("tile", "tile-" + tile.value, positionClass);
+ // We can't use classlist because it somehow glitches when replacing classes
+ var classes = ["tile", "tile-" + tile.value, positionClass];
+ this.applyClasses(element, classes);
+
element.textContent = tile.value;
- this.tileContainer.appendChild(element);
-
if (tile.previousPosition) {
+ // Make sure that the tile gets rendered in the previous position first
window.requestAnimationFrame(function () {
- element.classList.remove(element.classList[2]);
- element.classList.add(self.positionClass({ x: tile.x, y: tile.y }));
+ classes[2] = self.positionClass({ x: tile.x, y: tile.y });
+ self.applyClasses(element, classes); // Update the position
});
} else if (tile.mergedFrom) {
- element.classList.add("tile-merged");
+ classes.push("tile-merged");
+ this.applyClasses(element, classes);
+
+ // Render the tiles that merged
tile.mergedFrom.forEach(function (merged) {
self.addTile(merged);
});
} else {
- element.classList.add("tile-new");
+ classes.push("tile-new");
+ this.applyClasses(element, classes);
}
+
+ // Put the tile on the board
+ this.tileContainer.appendChild(element);
+};
+
+HTMLActuator.prototype.applyClasses = function (element, classes) {
+ element.setAttribute("class", classes.join(" "));
};
HTMLActuator.prototype.normalizePosition = function (position) {
--- a/style/main.css
+++ b/style/main.css
@@ -143,6 +143,8 @@
border-radius: 6px;
width: 500px;
height: 500px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
box-sizing: border-box; }
.game-container .game-message {
display: none;
@@ -336,29 +338,35 @@
@-webkit-keyframes appear {
0% {
opacity: 0;
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
100% {
opacity: 1;
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
@-moz-keyframes appear {
0% {
opacity: 0;
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
100% {
opacity: 1;
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
@keyframes appear {
0% {
opacity: 0;
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
100% {
opacity: 1;
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
.tile-new {
-webkit-animation: appear 200ms ease 100ms;
@@ -368,33 +376,42 @@
@-webkit-keyframes pop {
0% {
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
50% {
- -webkit-transform: scale(1.2); }
-
- 100% {
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
@-moz-keyframes pop {
0% {
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
50% {
- -webkit-transform: scale(1.2); }
-
- 100% {
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
@keyframes pop {
0% {
- -webkit-transform: scale(0); }
+ -webkit-transform: scale(0);
+ -moz-transform: scale(0); }
50% {
- -webkit-transform: scale(1.2); }
-
- 100% {
- -webkit-transform: scale(1); } }
+ -webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2); }
+
+ 100% {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1); } }
.tile-merged {
z-index: 20;
--- a/style/main.scss
+++ b/style/main.scss
@@ -155,6 +155,8 @@
border-radius: $tile-border-radius * 2;
width: $field-width;
height: $field-width;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
box-sizing: border-box;
.game-message {
@@ -342,15 +344,15 @@
@include keyframes(appear) {
0% {
- // -webkit-transform: scale(1.5);
opacity: 0;
-webkit-transform: scale(0);
+ -moz-transform: scale(0);
}
100% {
- // -webkit-transform: scale(1);
opacity: 1;
-webkit-transform: scale(1);
+ -moz-transform: scale(1);
}
}
@@ -362,16 +364,17 @@
@include keyframes(pop) {
0% {
-webkit-transform: scale(0);
- // opacity: 0;
+ -moz-transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
+ -moz-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
- // opacity: 1;
+ -moz-transform: scale(1);
}
}