0

我很难使用 angular 执行简单的幻灯片转换，我知道如何使用 jquery 完美地做到这一点，但是我正在尝试使用 angular 及其工具。这里提供了一个到目前为止所做的示例单击此处例如- 单击链接商店..

<div id="wrapper">
        <header ng-app="menu" id="main-nav">
            <a href="/" class="logo"></a>
            <ul id="nav" ng-controller="subNavController">
                <li><a href="/">search</a></li>
                <li>
                    <a class="hiddenMenu" ng-click="navMenu = !navMenu">shop</a>
                    <div ng-show="navMenu" class="block"></div>
                </li>
                <li><a href="/">Join LYB</a></li>
                <li><a href="/">LYB Mix Series</a></li>
                <li><a href="/">Help</a></li>
                <li><a href="/">Sign In</a></li>
                <li><a href="/">English</a></li>
            </ul>
        </header>
</div>

控制器

var app = angular.module("menu", []);
app.controller("subNavController", function ($scope){
        $scope.menu = function (){
            $scope.navMenu = ! $scope.navMenu;
        };
        $scope.navMenu = false;

});

有谁知道如何使用角度实现幻灯片效果

4

1 回答 1

0

这是我实现类似效果的方法，但在我的情况下，它是从顶部滑入 div。您应该能够切换几个参考top以适合您的情况。这需要angular-animate、jQuery和指定为要应用于元素的动画名称的类（.loading在我的示例中）。

app.animation('.loading', function() {
    return {
      addClass : function(element, className, done) {
        if(className == 'ng-hide') {
          jQuery(element).animate({
            top: '-100px'
          }, 1000, done);
        }
        else {
          done();
        }
      },
      removeClass : function(element, className, done) {
        if(className == 'ng-hide') {
          element.css('top','-100px');

          /* remove it early so you can animate on it since
             it is not possible using element.css() to set
             a style using !important */
          element.removeClass('ng-hide'); 
          jQuery(element).animate({
            top:0
          }, 0, done);
        }
        else {
          done();
        }
      }
    };
  });
于 2013-12-12T16:21:30.307 回答