Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Animationsbug behiben

Browse Source
This commit is contained in:
silas 2018-09-18 13:55:57 +02:00
parent d029ea130b
commit f7f3a5c405
4 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

4
public/js/app.js
View File

@ -4677,6 +4677,8 @@ class ParentSegment extends Segment {
} }
async rotate() { async rotate() {
let timeout = 1250;
if (!this.getLevel().getHasWon()) { if (!this.getLevel().getHasWon()) {
this.rotation += 90; this.rotation += 90;
this.rotation %= 360; this.rotation %= 360;
@ -4688,7 +4690,7 @@ class ParentSegment extends Segment {
let self = this; let self = this;
let delayPromise = new Promise(function (resolve) { let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250); setTimeout(resolve, timeout);
}).then(() => { }).then(() => {
if (self.rotation === currentRotation) { if (self.rotation === currentRotation) {
self.element.classList.remove("rotating"); self.element.classList.remove("rotating");

4
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -50,6 +50,8 @@ export class ParentSegment extends Segment {
} }
async rotate() { async rotate() {
let timeout = 250;
if (!this.getLevel().getHasWon()) { if (!this.getLevel().getHasWon()) {
this.rotation += 90; this.rotation += 90;
this.rotation %= 360; this.rotation %= 360;
@ -61,7 +63,7 @@ export class ParentSegment extends Segment {
let self = this; let self = this;
let delayPromise = new Promise(function (resolve) { let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250); setTimeout(resolve, timeout);
}).then(() => { }).then(() => {
if (self.rotation === currentRotation) { if (self.rotation === currentRotation) {
self.element.classList.remove("rotating"); self.element.classList.remove("rotating");

2
src/scss/wordRotator.scss
View File

@ -28,7 +28,6 @@ $animationDuration: 0.25s;
&.rotating { &.rotating {
z-index: 10 !important; z-index: 10 !important;
overflow: hidden; overflow: hidden;
vertical-align: top;
@for $i from 1 through length($rotationDegrees) { @for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} { &.rotate-#{nth($rotationDegrees, $i)} {
@ -108,6 +107,7 @@ $animationDuration: 0.25s;
} }
.segment { .segment {
vertical-align: top;
white-space: initial; white-space: initial;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;