ng设置动画以创建slideIn/slideOut过渡

ng-animate to created a slideIn / slideOut transition

本文关键字：slideOut 过渡 slideIn 创建 设置 动画 ng      更新时间：2023-09-26

我很难使用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;

})；

有人知道如何使用角度实现滑入效果吗

以下是我如何获得类似效果的，但在我的情况下，它是从顶部滑入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();
        }
      }
    };
  });
相关文章：