#import('dart:html');
num rotatePos = 0;
var textElement;
var moveMe = false;
void main() {
query("#text").text = "Click me!";
textElement = query("#text");
query("#text").on.click.add(fadeOutElement);
query("#text").on.doubleClick.add(fadeInElement);
query("#buttonMove").on.click.add(moveElement);
query("#buttonRotate").on.click.add(rotateElement);
query("#buttonRotateAndMove").on.click.add(rotateAndMoveElement);
}
void rotateAndMoveElement(Event event) {
rotatePos += 360;
Element element = textElement;
String moveMeTransform = getMoveMeTransform();
element.style.transition = "1s";
element.style.transform = "${moveMeTransform} rotate(${rotatePos}deg)";
}
void rotateElement(Event event) {
rotatePos += 360;
Element element = textElement;
element.style.transition = "1s";
element.style.transform = "rotate(${rotatePos}deg)";
}
void moveElement(Event event) {
rotatePos += 360;
Element element = textElement;
element.style.transition = "1s";
element.style.transform = getMoveMeTransform();
}
void fadeOutElement(Event event) {
rotatePos += 360;
Element element = event.srcElement;
element.style.transition = "1s";
element.style.opacity = "0.2";
element.style.transformStyle = "opacity(ease-in-out)";
}
void fadeInElement(Event event) {
rotatePos += 360;
Element element = event.srcElement;
element.style.transition = "1s";
element.style.opacity = "1";
element.style.transformStyle = "opacity(ease-in-out)";
}
String getMoveMeTransform() {
moveMe = !moveMe;
if (moveMe) {
return "translate(-100px,0px)";
} else {
return "translate(100px,0px)";
}
}
