Question

我的主视图中有一个弹出窗口，它可能只是一个产品或产品列表。在第一种情况下，弹出窗口的位置在视图的某个点（顶部和左侧，我已经有了一个方法）并且它有一个缩放动画。但如果是列表，则位置在右侧，动画则为幻灯片。

在视图中：

<div data-ng-if="showProduct" id="product" data-ng-class="animation">
  <div class="productContainer" data-ng-style="productStyle()">
    <div class="productContent">
    </div>
  </div>
  <span data-ng-if="isProductList" class="closeIcon" data-ng-click="close()"></span>
</div>

在控制器中:(这是为了显示这个想法，当然不是这样的）

$scope.productStyle = function () {
    return { top: "0", left: "auto", right: "0", height: "100%" };
}

$scope.animation = true==true ? "slideAnimation" : "zoomAnimation";

$scope.close = function () {
    $scope.showProduct = false;
}

sass：

#main {
  position:relative;  
}

@mixin transform($value) {
    transform: $value;
    -ms-transform: $value;
    -webkit-transform: $value;
}

@mixin transitionDuration ($duration) {
    transition-duration: $duration;
    -webkit-transition-duration: $duration;
}

#product {
  position:static;

    .productContainer {
        position:absolute;
        z-index:3;
        overflow-y:auto;
        width: 32%;
        background-color: green;

        .productoContent {
          width: 200px;
          height:200px;
        }
    }

    .closeIcon {     
        position: absolute;
        width: 5%;
        height: 54px;
        background: #333;
        z-index: 3;
        top: -20px;
        left: 63%;
        padding-left: 2%;
        padding-top: 16px;
        cursor: pointer;
    }                 
}

.zoomAnimation {

    &.ng-enter {
        @include transitionDuration(250ms);
        @include transform(scale(1.3));
        opacity: 0;
    }

    &.ng-enter-active {
      @include transform(scale(1));
        opacity: 1; 
    }

    &.ng-leave {
      @include transitionDuration(250ms);
      @include transform(scale(1));
          opacity: 1;
    }

    &.ng-leave-active {
        @include transform(scale(1.5));
        opacity: 0; 
    }
}

.slideAnimation {

    &.ng-enter {
        @include transform(translateX(200%));
        @include transitionDuration(250ms);
        opacity: 0; 
    }

    &.ng-enter-active {
        @include transform(translateX(0));
        opacity: 1; 
    }

    &.ng-leave {
        @include transform(translateX(0));
        @include transitionDuration(1.5s);
        opacity: 1; 
    }

    &.ng-leave-active {
        @include transform(translateX(200%));
        opacity: 0; 
    }
}

我无法移除绝对位置，因为其他一切都被打破了，但是如果我删除它的缩放和翻译工作。有人对这个问题有所了解吗？

感谢您的时间！

动画，平移和缩放的问题与绝对位置无关

0 个答案: