Как я могу использовать XUI Твин? - PullRequest
Новая
       19

Как я могу использовать XUI Твин?

1 голос
/ 07 ноября 2011

Я не понимаю, как использовать анимацию XUI. На веб-сайте xui они дают следующий пример кода: 

x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);

Что это должно делать? Я создал <div id="box"></div>, запустил строку кода JS выше, но ничего не произошло. Вот мой полный код: 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="xui.min.js"></script>
    <script type="text/javascript">
    x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
    </script>

</head> 
<body> 

<div id="box"></div>
</body>
</html>

Ничего не происходит ...

1 Ответ

2 голосов
/ 02 декабря 2011

Итак, подросток XUI, похоже, находится в процессе разработки. Фактически, в главном коде ветки на GitHub вы найдете: 

// queued animations
/* wtf is this?
     if (props instanceof Array) {
     // animate each passing the next to the last callback to enqueue
         props.forEach(function(a){       
         });
      }
 */

Итак, вкратце, свойства анимации на основе массива в настоящий момент выглядят испорченными. Кроме того, XUI tween выглядит немного странно при работе со свойствами, которые в данный момент не установлены для элемента DOM. (Например, установка background-color на прозрачном элементе делает его черным ..., а не предполагаемым цветом.)

Тем не менее, одиночные tween и callback хорошо работают с ранее установленными свойствами. Итак, взгляните на следующее (и извините за встроенный CSS): 

<html> 
    <head> 
    <script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>

    <script type="text/javascript">
    x$.ready(function(){
        setTimeout(function(){
                x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
                x$('#box').tween({'left':'500px', duration:2000});
            });
        }, 500);
    });
    </script>
</head> 
<body style="position:relative;"> 
    <div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>

Поскольку #box теперь имеет явно заданную позицию css background-property и left, относительно легко получить эффект, аналогичный желаемому.

Через полсекунды после загрузки страницы #box должен потратить 2 секунды на переход от left:500px к left:100px, переключая цвет фона с белого на зеленый. Затем, с помощью обратного вызова, #box возвращается в исходное положение на left:500px - еще 2 секунды, чтобы вернуться.

Очевидно, что это не ответит на ваш точный вопрос, но для тех (как я), которые наткнулись на это, это пока обходной путь.

...