I am attempting to fade out one element using "ng-show" and fade in another at the same time. This is working all fine and dandy, but unfortunately when the element which is fading out is hidden, there appears to be some "snapping" when display: none is set.
I've attempted setting position: absolute on my ng-hide-add-active & ng-hide-remove-active but this simply screws up the layout.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<h1 id="wf-logo">Hello</h1>
<hr />
<div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Stuff Box</h3>
</div>
<div class="sk-folding-cube animate" ng-show="!doneLoading">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
<div id="content-well" class="well animate" ng-show="doneLoading">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia urna vitae lectus faucibus porta. Nulla eu consequat nisl. Quisque fringilla sapien id vulputate sollicitudin. Curabitur et facilisis justo. Donec malesuada augue vitae diam maximus luctus. Nulla fermentum consectetur ipsum ut tempor. Curabitur pretium eros eget nisi bibendum fermentum. Cras fermentum egestas nunc ut vulputate. Nulla aliquam tortor ut nulla consequat faucibus. Fusce imperdiet, felis nec semper vestibulum, magna dui ultricies tortor, eget mattis mauris arcu et ipsum. Suspendisse imperdiet nec mauris eget placerat.</p>
<p>Nulla purus augue, congue sed sollicitudin ut, volutpat sed ex. Donec lobortis sem eu risus consequat tincidunt. Nullam egestas lectus et semper gravida. Suspendisse facilisis erat a eros scelerisque euismod. Sed elementum eros ac nibh viverra condimentum eu vel mi. Ut sit amet nulla sit amet velit dignissim cursus quis ut mi. In a ultrices dolor. Proin sollicitudin sit amet lorem in fringilla. Mauris ac egestas est. Donec quis fermentum est, nec interdum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id massa pellentesque, fringilla orci id, ultrices nisl. Nam non viverra felis, ac sodales justo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
/* Styles */
#content-well {
margin-bottom: 0px;
}
/* Animations */
.animate.ng-hide-add,
.animate.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate.ng-hide-add.ng-hide-add-active,
.animate.ng-hide-remove {
opacity:0;
}
.animate.ng-hide-add,
.animate.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
/* Folding cube spinner */
.sk-folding-cube {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
Please see this Plunker:
http://plnkr.co/edit/6vSRIJ8xkmn75S9FyLMJ?p=preview
Is it possible to have the loading spinner & content both remain centered and properly positioned while one fades out and the other fades in? Any assistance would be greatly appreciated. Thank you!
Put position: absolute on one of the two containers.
For example:
.sk-folding-cube {
position: absolute;
The drawback is that you will have to add more CSS both to position the element as you want and to make it look like the panel wraps it.
For example:
.panel {
min-height: 161px;
}
.sk-folding-cube {
position: absolute;
left: 50%;
margin-left: -20px;
margin-top: 40px;
margin-bottom: 40px;
width: 40px;
height: 40px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
Demo: http://plnkr.co/edit/5lYJneAkT6TwYkfg3KPJ?p=preview
Another solution is to just skip the fade out animation entirely. Personally, when elements are overlapping, I rarely find it necessary to have one of the elements fade in while the other fade out. Instead, just hide the first and fade in the other. A matter of taste perhaps.