I am currently working on an application that requires a button to be clicked in order to hide or show a specific element.
To achieve this functionality, I am using ng-hide in AngularJS, but I am facing an issue where the transition is not working as expected. I am still new to CSS3 transitions, so I need some guidance on what I might be doing wrong.
My goal is to have a smooth fade in fade out effect to make the appearance more natural.
Here is the CSS3 code:
#custom-url{
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#custom-url .ng-hide{
opacity: 0;
}
HTML code:
<input ng-model="custom_url" id="custom-url" ng-show="customMode" type="text" placeholder="Place your custom URL text here" class="ng-hide form-control"/>
<button class="btn btn-success" ng-click="customMode = !customMode">Make my own URL <b class="glyphicon glyphicon-heart"></b></button></div>
AngularJS code:
(function(angular) {
angular.module('urlShortener', [])
.controller('shortenerController', function($scope){
$scope.customMode = false;
})
})(window.angular);
Any assistance would be greatly appreciated.