.ng-enter not working in Angular 1.3.14?

873 views Asked by At

I cannot seem to get ng-enter animations to work. I have a repeated div presenting so-called "feature boxes," which are small headline boxes. I have read through numerous tutorials and cannot figure out why my code is any different/is not working. Can anyone figure it out?

My code is:

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;

}

Edit:

Here is a jsfiddle of it: https://jsfiddle.net/zu1bjzj9/4/

1

There are 1 answers

0
John McLaughlin On

The reason why this isn't working is because of an extra comma that you have in your CSS code.

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

should be changed to

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