Whenever I click on either of the buttons, the text should immediately appear in a fixed position. However, currently, the text only takes its fixed position after the closing animation of the previous text finishes. Here is the code snippet:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0e01081a030e1d420e0106020e1b0a2f5e41584157">[email protected]</a>/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<input type="button" value="Show A" data-ng-click="boolA()" />
<input type="button" value="Show B" data-ng-click="boolB()" />
<input type="button" value="Show C" data-ng-click="boolC()" />
<div data-ng-show="bool.a" class="test">
<h1>Picked A</h1>
</div>
<div data-ng-show="bool.b" class="test">
<h1>Picked B</h1>
</div>
<div data-ng-show="bool.c" class="test">
<h1>Picked C</h1>
</div>
</div>
CSS
.test.ng-hide-add,.test.ng-hide-remove{
transition:0.5s linear all;
opacity:1;
}
.test.ng-hide{
opacity:0;
}
JS
var app=angular.module('myApp',['ngAnimate']);
app.controller('myCtrl',function($scope){
$scope.bool={
a:false,
b:false,
c:false
}
$scope.boolA=function(){
$scope.bool.a=true;
$scope.bool.b=false;
$scope.bool.c=false;
}
$scope.boolB=function(){
$scope.bool.a=false;
$scope.bool.b=true;
$scope.bool.c=false;
}
$scope.boolC=function(){
$scope.bool.a=false;
$scope.bool.b=false;
$scope.bool.c=true;
}
});
Check out this JSFiddle link for the current implementation: link
Your suggestions and tips are welcomed. Thank you for your attention!