CSS3 Transitions and Transforms with Dart

Dart is the "new" web language for building concise, complex and professional applications.  As an avid GWT fan this is probably where GWT is heading, so I feel a need to get-up-to-speed in this area.  Experiment 1 - Try CSS Transitions and Transforms.  See code below:

#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)";

  }

}