Question

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

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

我的第一直觉是使用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);

目前，我已经记录了“cat anim done”，但实际上并没有发生任何事情。任何有关如何使这个动画工作的帮助将非常感激。

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。

所以在你的情况下，你将改变左边的财产：

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

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

我希望这有帮助！

使用角度

1 个答案: