rstacruz / jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
http://ricostacruz.com/jquery.transit
7.29k stars 864 forks source link

When changing option sequence it bugs transition() #106

Open skmasq opened 11 years ago

skmasq commented 11 years ago

I stumbled upon bug transitioning same element:

  1. If I start with this: Coordinates: -webkit-transform: matrix(1, 0, 0, 1, -185, -900); #main-area - scale(1) rotate(0) translate(-185px,-900px) translateZ(0)
  2. And then execute this:
$(".viewarea-reset").on('click', function () {
        $("#main-area").transition({
            translate: [0, 0],
            scale: 0.2346,
            rotate: 0,
            duration: 1000
        });
    });

Coordinates -webkit-transform: matrix(0.2346, 0, 0, 0.2346, 0, 0); element.style - translate(-1031px, -941px) scale(1, 1) rotate(77deg)

  1. Then this transition fails:
$(".route-2", "#developer-toolbar").on('click', function () {
        $(".starting-page").css("display", "none");
        $("#main-area").transition({
            scale: 1,
            rotate: 77,
            translate: [-1031,-941],
            duration: 2000
        });
    });

By giving these coordinates: -webkit-transform: matrix(0.22495105434386492, 0.9743700647852352, -0.9743700647852352, 0.22495105434386492, -1031, -941); element.style - translate(-1031px, -941px) scale(1, 1) rotate(77deg) But it should be: -webkit-transform: matrix(0.22495105434386492, 0.9743700647852352, -0.9743700647852352, 0.22495105434386492, 684.9576939343817, -1216.2544789311544); element.style - scale(1, 1) rotate(77deg) translate(-1031px, -941px)