MooTools Tween в процентах - PullRequest
Новая
       23

MooTools Tween в процентах

1 голос
/ 26 марта 2010

Возможно ли анимировать элемент в процентах в MooTools? 

var slide = new Fx.Tween($('slide_box'));
$('next_slide').addEvent('click',function(){
    slide.start('left', '-100%');
});

Но этот код анимации элемента на 100px, а не в процентах.

Ответы [ 2 ]

8 голосов
/ 26 марта 2010

Взгляните на базовый Fx класс, есть возможность установить единицу измерения. Ваш пример можно переписать так: 

$('next_slide').addEvent('click', function(){
    new Fx.Tween('slide_box', {
        unit: '%'
    }).start('left', -100);
});

Вы можете увидеть это в действии здесь .

2 голосов
/ 26 марта 2010

Может быть, я упускаю из виду что-то очевидное, но разве -100% это не просто "0px"?

Если элемент имеет абсолютную левую позицию 600 пикселей в относительно позиционированном DIV, то смещение этого элемента на 100% влево приведет к позиции 0,0 (при условии, что верхняя часть элемента равна 0).

Вы могли бы достичь этого с помощью морфа. 

$('slide_box').morph({'left':'0px'});

Если вы хотите сместить элемент на значение, отличное от 100%, вы можете использовать простой расчет, чтобы определить требуемую величину сдвига. 

var shiftPercentage = 70;
var elementPosition = $('slide_box').getPosition().x;
var resultingShiftAmount = (elementPosition/100)*shiftPercentage;
$('slide_box').morph({'left':resultingShiftAmount+'px'});

Конечно, в зависимости от того, хотите ли вы сдвинуть его в положительное или отрицательное значение, сделайте переменную resultShiftAmount положительной или отрицательной.

Надеюсь, это поможет.

Еще одно редактирование, кажется, у класса Tween есть опция под названием 'unit'. Я думаю, что это не будет работать так, как вы ожидаете. 

var slide = new Fx.Tween($('slide_box'),{unit:'%'});
slide.start('left','-100%');

Приведенный выше фрагмент кода преобразует элемент 'slide_box' в положение -100% относительно его содержащего элемента (по крайней мере, в моих кратких тестах это так). Например - содержащий элемент находится в 0px, 0px имеет свою позицию относительно. Внутри этого элемента есть абсолютно позиционированный элемент в 500px, 0px. Насколько я понимаю, если бы вы использовали приведенный выше код для этого абсолютно позиционированного элемента, он был бы позиционирован абсолютно от 0,0 содержащего элемента минус 100% ширины содержащего элемента.

Мне кажется, это немного сбивает с толку, но вот что показали тесты.

Удачи!

...