Question

我很难使用angular执行简单的幻灯片转换，我知道如何使用jquery完美地完成此操作，但是我正在尝试使用angular和它的工具。这里提供了迄今为止所做的事情的一个例子Click Here for example - 点击链接商店..

<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;

}）;

有没有人知道如何使用角度

实现幻灯片

Answer 1

这是我如何实现类似的效果，但在我的情况下，它是从顶部滑动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();
        }
      }
    };
  });

ng-animate创建幻灯片中/滑出过渡

1 个答案: