Question

我有动态加载htmls，我创建了一个指令以加载html模板。

main.html中：

<button class="btn" ng-click='toggle()'></button>
<div class="anim">
        <app show='modalShown'></app>
    </div>

sub.html：

<div id="sub"></div>

控制器：

$scope.toggle = function() {
            $scope.modalShown = !$scope.modalShown;
            var htmlcontent = $('.addtl');
            htmlcontent.load('sub.html');
            $compile(htmlcontent.contents())($scope);
        };

app.js：

app.directive('app', function() {
        return {
            restrict: 'E',
            scope: {
                show: '='
            },
            replace: true, // Replace with the template below
            transclude: true, // we want to insert custom content inside the directive
            link: function(scope, element, attrs) {
                scope.dialogStyle = {};
                if (attrs.width)
                    scope.dialogStyle.width = attrs.width;
                if (attrs.height)
                    scope.dialogStyle.height = attrs.height;
                scope.hideModal = function() {
                    scope.show = false;
                };
            },
            template:
                "<div class='ng-modal check-element animate-show' ng-show='show' >" +
                    "<div class='ng-modal-dialog' ng-style='dialogStyle'>" +
                        "<div class='ng-modal-close' ng-click='hideModal()'>Close</div>" +
                            "<div class='addtl'></div>" +
                    "</div>" +
                        "<div class='ng-modal-dialog-content' ng-transclude></div>" +
                    "</div>" +
                "</div>"
        };
    });

点击按钮，相应的html模板将打开和关闭。我试图添加上下滑动的效果，以使我的模板看起来很漂亮。

任何人都可以帮助我。

Answer 1

当你隐藏并使用ng-show显示模态时，你可以使用内置的CSS动画类来提供过渡（例如.ng-hide-add，.ng-hide-remove）。

详细了解这一点：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide

另外，请勿忘记在应用中添加ngAnmiate模块。

.animate-show-animation.ng-hide-add,
.animate-show-animation.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;

  /* remember to add this */
  display:block!important;
  opacity:1;
}
.animate-show-animation.ng-hide {
  opacity:0;
}

Answer 2

使用ng-animate模块，非常好地使用ng-show和ng-hide支持。这是我用来在移动应用程序中的页面之间转换的CSS类的示例。这会导致页面向左/向右滑动/滑出。 slideInFromLeft在显示时从左侧滑入，并在隐藏时向左滑动。 slideInFromRight做同样的事情，但是从右边而不是左边。要通过从顶部/底部滑入来完成此工作，您需要相应地将定位更改为顶部/底部。

.slideInFromLeft, .slideInFromRight {
    width: 100%;
}

.slideInFromLeft.ng-hide-add, .slideInFromLeft.ng-hide-remove, .slideInFromRight.ng-hide-add, .slideInFromRight.ng-hide-remove {
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    transition: all linear 0.3s;
    display: block !important;
}

.slideInFromLeft.ng-hide-add.ng-hide-add-active,
.slideInFromLeft.ng-hide-remove {
    position: absolute;
    left: -100%;
}

.slideInFromRight.ng-hide-add.ng-hide-add-active,
.slideInFromRight.ng-hide-remove {
    position: absolute;
    left: 100%;
}

.slideInFromLeft.ng-hide-add,
.slideInFromLeft.ng-hide-remove.ng-hide-remove-active {
    left: 0;
}

.slideInFromRight.ng-hide-add,
.slideInFromRight.ng-hide-remove.ng-hide-remove-active {
    left: 0;
}

为角度指令添加幻灯片动画

2 个答案: