Question

我正在使用slideUp和slideDown来动画隐藏和显示使用AngularJS的ngShow的部分。它工作正常，但我更喜欢slideLeft和slideRight。我将如何为那些人重新创建slideUp和slideDown？

slideUp会自动隐藏元素，slideDown会自动显示它 - 我怎样才能配置它以便隐藏和显示我想要的时间？ e.g：

$(element).slideLeftAndHide(); $(element).slideLeftAndShow();

与

相反

$(element).slideUp(); // $element.slideUpAndHide();

Answer 1

您可以使用以下方法实现此目的：

$('#element').show("slide", { direction: "left" }, "fast");

Answer 2

由于你标记了Angular.js，我假设你也在使用Angular。您应该更喜欢使用类似ng-class的内容，而不是使用jQuery显示和隐藏元素。这是一种很好的模块化方法，可以使用现有的Angular.js功能和快速CSS动画来完成您想要的任务。

我还假设您正在进行显示/隐藏部分以响应某种条件值的变化，是吗？

如果是这样，开始：

1。当条件值改变时，通过在条件变为真时添加类名来让DOM知道。

<div ng-class="{showing: myDataFinallyLoaded}">...</div>

在这种情况下，如果myDataFinallyLoaded为真，则div附加showing个类。

2。如果div附加了showing类名，请将其设置为视图。

div {
    transform: translate(-100%) scale(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

div.showing {
    /* Any CSS rules can go in here! */
    transform: translate(0px) scale(1);
    opacity: 1;
}

3。当您的条件成立时，请更新范围。

someRandomAPI.loadEverything().then(function() {
  $scope.myDataFinallyLoaded = true;
});

重新创建jQuery的slideUp和slideDown，但是对于slideRight和slideLeft呢？

2 个答案: