Search code examples
qooxdoo

qooxdoo : Rotate Button along its center

I have a qx.ui.form.Button. I would like it to rotate 180 degree ( i.e. upside down ) along its center when I click the button. (I'm working on qx.Desktop )

var btn = new qx.ui.form.Button(null, "myproject/button.png");
btn.addListener("click", function () {
  // which function should I use ?
});

The rotation should have animation, i.e. rotate clockwise.

Solution

  • qooxdoo does not have transformations build in the widget layer itself but it offers a way to animate / rotate dom elements. So you have to get the container element of the button and start a animation on that:

    var el = btn.getContainerElement().getDomElement();
qx.bom.element.Animation.animate(el, {
  duration: 1000, timing: "ease", keep: 100, keyFrames : {
    0: {rotate: "0deg"},       // ["0deg"] for flipping effect
    100 : {rotate : "180deg"}  // ["180deg"] for flipping effect
  }
});

    Check out the documentation of the animate function to see how this code works: http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Animation~animate

    And here is a working playground sample.