Question

我有一个容器（我用它作为模态），它总是出现在页面上，但是用ng-show显示/隐藏。我通过添加过渡功能在该元素上启用了动画，因此当容器不透明/缩小时，页面的背景会模糊，就像从上面落到页面上一样。

在这个模态中我有一个ui-view。当此视图为其进入/离开状态设置动画时，模态将不会设置动画。
例如，当我第一次通过单击激活它的按钮打开模态时，当前没有指定视图，因此它加载的视图通过其输入动画进行，而模态应该从上面进入。
然而，模态没有动画，它甚至没有应用动画，它只是弹出，你可以通过其输入动画看到初始视图加载到它（一个简单的幻灯片从对，现有视图向左滑出的位置）。您可以在模态打开时在模态中执行更多操作，并且内部视图将适当地滑出/滑入。
然后如果你关闭模态，再通过另一个流程打开它，它有一个新的视图进入，但是模态再次弹出而不是动画，而你看到上一次模态打开时的视图离开，以及新的视图滑入。

使用SASS制作以下样式。

这是我的模态内容的动画代码（模式中从侧面滑入和滑出的页面）：

.modal__content {
    position: absolute;
    top: 82px;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.5s ease-out;

    &.ng-enter {
        -webkit-transform: translate3d(100%,0,0);

        &-active {
            -webkit-transform: translate3d(0,0,0);
        }
    }
    &.ng-leave {
        -webkit-transform: translate3d(0,0,0);

        &-active {
            -webkit-transform: translate3d(-100%,0,0);
        }
    }
}

如上所述，这总是有效的。视图总是适当地滑入和滑出。但是当视图滑入/滑出时，并且模态打开，模态不会动画。这是我的模态的动画代码（它总是出现在页面上，并有一个ng-show表达式）：

.nw-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 1;
    background-color: rgba(0,0,0,0.3);
    -webkit-transform: scale(1) translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-transition: 0.3s ease-out;

    &.ng-hide-add {
        opacity: 1;
        -webkit-transform: scale(1) translateZ(0);
        -webkit-transition-delay: 0s;

        &.ng-hide-add-active {
            opacity: 0;
            -webkit-transform: scale(1.5) translateZ(0);
        }
    }

    &.ng-hide-remove {
        -webkit-transition-delay: 0.3s;
        opacity: 0;
        -webkit-transform: scale(1.5) translateZ(0);

        &.ng-hide-remove-active {
            opacity: 1;
            -webkit-transform: scale(1) translateZ(0);
        }
    }
 }

我的问题是，为什么会这样？这是一个已知的问题吗？有什么我做错了，或者如果没有，是否有修复？
我是否应该使用ng-hide-remove类的优势，并且只在不在模态上时应用leave / enter动画？因此，只有当模态不在显示过程中时，视图才会生成动画？是否与视图本身的动画无关，但视图是否具有新的视图内容已添加，旧内容已删除，即使没有动画，模式仍然会弹出＆＃34; pop＆＃34;在？

感谢您的帮助。

当孩子ui-view进入/离开

0 个答案: