Question

我似乎无法使用ng-enter动画来工作。我有一个重复的div提出所谓的“功能盒”，这是一个小标题框。我已阅读了大量的教程，无法弄清楚为什么我的代码有所不同/无法正常工作。任何人都可以搞清楚吗？

我的代码是：

HTML：

<div id="main-box">
     <div class="feature-column">
            <div ng-repeat="homeFeature in homeFeatures" class="feature-box">

             <div back-img="{{ homeFeature.color }}">
                 <div class="feature-overlay" ng-if="homeFeature.spacer==false">
                     <h1 class="feature-headline">{{ homeFeature.headlineL1 }}</h1>
                     <h1 class="feature-headline">{{ homeFeature.headlineL2 }}</h1>
                     <h1 class="feature-headline">{{ homeFeature.headlineL3 }}</h1>

                 </div>
             </div>

             </div>
     </div>
</div>

CSS：

.feature-column {

position: relative;
padding-top: 3%;
max-width: 35%;
margin: 0 auto;
}

.feature-box {

position: relative;
min-width: 150px;
max-height: 150px;
opacity: 1;
float: left;
z-index: 0;
margin: 0 auto;
overflow: hidden;
}

.feature-overlay {

position: relative;
width: 100%;
height: 100%;
content: ' ';
z-index: 1;
padding-top: 10%;
padding-left: 10%;

background: rgba(236, 240, 241, .4);
overflow: visible;

}

.feature-overlay:hover {

background: rgba(0, 0, 0, .6);

}

.feature-headline {

text-align: left;
padding: 0;
margin: 0;
color: white;
font-size: 1.7em;
}


.feature-box.ng-enter,
.feature-box.ng-enter.ng-enter-active, {

transition: all 2s ease;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;

}

.feature-box.ng-enter {

opacity: 0;

}

.feature-box.ng-enter.ng-enter-active {

opacity: 1;

}

修改

以下是jsfiddle：https://jsfiddle.net/zu1bjzj9/4/

Answer 1

这不起作用的原因是你的CSS代码中有一个额外的逗号。

.feature-box.ng-enter, .feature-box.ng-enter.ng-enter-active, {

应改为

.feature-box.ng-enter, .feature-box.ng-enter.ng-enter-active {

.ng-enter在Angular 1.3.14中不起作用？

1 个答案: