jquery - 使用 angular 动画化 CSS 属性

Question

所以...我正在处理一个水平菜单，其中的元素会溢出窗口的 x 轴。通过 Angular Controller 使用箭头键在菜单中导航元素。

我正在尝试找出一种为 CSS 过渡设置动画的方法，这将使整个菜单根据导航向左/向右移动，以便事件元素始终可见。这应该在不滚动的情况下完成，因为窗口设置为溢出:隐藏。

我的第一直觉是使用 jquery .animate()，但这在 Angular Controller /指令中对我不起作用。

菜单的 HTML:

<section id="catContainer" cat-navigation ng-class="{'disabled': activeLevelIndex > 1}">
        <div ng-repeat="category in categories" ng-class="{'active': $index == activeCatIndex }" class="category selectable">
            <img class="catImg" ng-src="{{category.image}}" />
            <h2>{{category.name}}</h2>
        </div>
    </section>

这是我在按下右/左按钮时触发的代码:

var current = $("#catContainer .category.active");
var left = current.position().left;
var right = left + current.width();
var shift;

if (right > $(window).width)
    shift =  -(1.2 * current.width()) + $("#catContainer").css("left-margin");
else if (left < 0){
    shift =  (1.2 * current.width()) + $("#catContainer").css("left-margin");
}

$("#catContainer").animate({
    "margin-left" : shift
    }, 400, function() {
        console.log("cat anim done.");
    });
$("#catContainer").css("margin-left", shift);

目前，我记录了“cat anim done”，但实际上什么也没有发生。非常感谢任何有关弄清楚如何让这个动画工作的帮助。

Answer 1

这是我为你做的。

http://jsfiddle.net/q255npgr/1/

比起用 JS 做动画，用 CSS transitions 效率更高，也更容易。只需使用 JS 设置左侧属性，让 CSS 处理其余部分。

CSS:

.item {
    width: 48px;
    height: 48px;
    border: 1px solid red;
    background: black;
    float: left;
    color: #FFF;
}
#mask {
    width: 70px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#slider {
    top: 0;
    left: 0;
    position: absolute;
    transition: 1s left; //THIS IS THE KEY PROPERTY
    width: 30000px;
    height: 50px;
}

JS:

var posish = 0;

$('#right').click(function(){
    $('#slider').css('left', posish -= 50);
});
$('#left').click(function(){
    console.log('ss', $('#slider').css('left'));
    $('#slider').css('left', posish += 50);
});

html:

<div id="mask">
    <div id="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>
<button id="left"><</button>
<button id="right">></button>

注意:您需要正确的 browser prefixes对于您需要支持的浏览器矩阵。

因此，在您的情况下，您将通过以下方式更改 left 属性:

$("#catContainer").css("left", shift);

此外，您可以绑定(bind)到 transition end如果您需要在动画完成后执行某些操作。

希望对您有所帮助!