- if (fadeout_pieces.length == 0 || fadein_pieces.length > 0 || move_pieces.length > 0) {
- requestAnimationFrame(() => { // Firefox workaround.
- // Backup in case the transition never runs.
- setTimeout(() => onFinish(null, true),
- cfg.appearSpeed + cfg.trashSpeed + cfg.moveSpeed + 100);
-
- fadein_pieces.forEach((piece) => {
- piece.style.opacity = 0;
- piece.style.display = null;
- piece.addEventListener('transitionend', onFinish, {once: true});
- });
- fadeout_pieces.forEach((piece) => {
- piece.style.opacity = 1;
- piece.style.display = null;
- piece.addEventListener('transitionend', onFinish, {once: true});
- });
- for (const [piece, destination] of move_pieces) {
- // Move it to the end of the stack, which changes the implicit z-index
- // so that it will go on top of any pieces it's replacing.
- piece.remove();
- boardEl.appendChild(piece);
- piece.addEventListener('transitionend', onFinish, {once: true});
- }
- requestAnimationFrame(() => {
- fadein_pieces.forEach((piece) => {
- piece.style.transitionProperty = 'opacity';
- piece.style.transitionDuration = cfg.appearSpeed + 'ms';
- piece.style.opacity = 1;
- });
- fadeout_pieces.forEach((piece) => {
- piece.style.transitionProperty = 'opacity';
- piece.style.transitionDuration = cfg.trashSpeed + 'ms';
- piece.style.opacity = 0;
- });
- for (const [piece, destination] of move_pieces) {
- let destSquarePosition = findSquarePosition(destination);
- piece.style.transitionProperty = 'top, left';
- piece.style.transitionDuration = cfg.moveSpeed + 'ms';
- piece.style.top = destSquarePosition.top;
- piece.style.left = destSquarePosition.left;
- }
- });
- });
+ fadein_pieces.forEach((piece) => {
+ piece.style.display = null;
+ piece.style.opacity = 1;
+ piece.animate(
+ [ { opacity: 0 }, { opacity: 1 } ],
+ { duration: cfg.appearSpeed }
+ ).addEventListener('finish', onFinish);
+ });
+ fadeout_pieces.forEach((piece) => {
+ piece.style.display = null;
+ piece.style.opacity = 0;
+ piece.animate(
+ [ { opacity: 1 }, { opacity: 0 } ],
+ { duration: cfg.trashSpeed }
+ ).addEventListener('finish', onFinish);
+ });
+ for (const [piece, destination] of move_pieces) {
+ // Move it to the end of the stack, which changes the implicit z-index
+ // so that it will go on top of any pieces it's replacing.
+ piece.remove();
+ boardEl.appendChild(piece);
+
+ let destSquarePosition = findSquarePosition(destination);
+ piece.animate(
+ [
+ { top: piece.style.top, left: piece.style.left },
+ { top: destSquarePosition.top, left: destSquarePosition.left }
+ ],
+ { duration: cfg.moveSpeed }
+ ).addEventListener('finish', onFinish);
+ piece.style.top = destSquarePosition.top;
+ piece.style.left = destSquarePosition.left;