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/
The reason why this isn't working is because of an extra comma that you have in your CSS code.
should be changed to