使用角度动画 CSS 属性

Question

所以... 我正在处理一个水平菜单，其中包含溢出窗口 x 轴的元素。 导航菜单中的项目是通过 Angular 控制器使用箭头键完成的。

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

我的第一直觉是使用 jquery .animate()，但这对我在角度控制器/指令中不起作用。

菜单的 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);

目前，我记录了“猫动画完成”，但实际上什么也没发生。 任何有关如何使此动画工作的帮助将不胜感激。

Answer 1

这里，我刚刚为你做了这个。

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

比起使用 JS 来制作动画，使用 CSS 过渡更高效、更容易。只需使用 JS 设置 left 属性，其余的交给 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);

如果您需要在动画完成后执行某些操作，还可以绑定到transition end 事件。

我希望这会有所帮助！