Transition effect does not work properly when using ng-hide

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);

Plunker

Any assistance would be greatly appreciated.

Answer №1

You seem to have a couple of issues to address here.

1) The use of ng-show/ng-hide applies the class .ng-hide to the element, which sets the display property to none. This property cannot be animated, so your opacity rule will not be applied. To animate using ng-show/ng-hide, you will need to implement ng-animate, which adds intermediate classes for the animation to complete. Check out this helpful tutorial for more information: here and here.

2) Keep in mind that ng-hide is applied to the element itself, not its descendants. Therefore, your rule #custom-url .ng-hide will not have any effect. Instead, it should be #custom-url.ng-hide.

3) If you prefer not to use the angular-animate library, consider using ng-class instead.

Check out this example with ng-animate

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to retrieve and save data in a variable using React Native

click here for image referenceI am a beginner in react-native and I recently attempted to use fetch to access an API. While I successfully managed to print the result on the console, I encountered difficulty in displaying it on a mobile screen. Below is a ...

Why does updating state lead to a re-rendering loop while setting state does not encounter the same issue?

Essentially, I have developed a REST Api that retrieves a list of components (sections) from a CMS along with their associated data. Each section in the UI is assigned a number to indicate its position, but certain sections are excluded from counting, such ...

Issues with a responsive website not displaying correctly in the Firefox browser

I have created a carousel that is functioning correctly. However, I am encountering an issue with making it fully responsive. It appears to work properly in webkit browsers, but there are some issues in Firefox. Despite the images resizing properly, the ...

Angular and Laravel API combination for creating a straightforward single page application

I'm looking to develop a straightforward Single Page Application using AngularJS and Laravel 4 as my API backend. The application will consist of basic posts, categories (essentially a blog), and some static pages. My goal is to integrate Laravel&apos ...

Tips for utilizing multiple filters in AngularJS's $filter function

Two filters need to be applied on the content of a controller. The first filter should make the text lowercase, and the second one is a custom filter. I attempted to use them as follows: $filter('lowercase','cardShortNameRegex')(curre ...

Setting minimum and maximum time limits for an Angular Timepicker

Is there a way to set constraints for the time range in Angular's bootstrap time picker? While setting minimum and maximum dates is possible with Angular's Datepicker, I'm curious if similar functionality can be implemented for the Timepicke ...

Using curly brackets as function parameters

Can someone help me understand how to pass an emailID as a second parameter in curly braces as a function parameter and then access it in AccountMenuSidebar? I apologize for asking such a basic question, I am new to JavaScript and React. class Invoices ex ...

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...

The button functionality gets hindered within the Bootstrap well

I'm trying to figure out what's wrong with my code. Here is the code: https://jsfiddle.net/8rhscamn/ <div class="well"> <div class="row text-center"> <div class="col-sm-1">& ...

Update all project files in Firebase authentication

A client-side project is being developed using firebase and vue. After a successful login by the user, the authService object gets updated in the Login component, but not in the router. The authService is utilized in both the Login component and AdminNavba ...

Limit a div to only accept a specific stylesheet

Currently, I am immersed in a project that involves HTML5, MVC 4, CSS 3, JQuery, and LINQ. We have meticulously designed styles for various ui, li, and other html controls within the project. However, I now face the challenge of integrating a JQ Grid (htt ...

I am unfamiliar with this scenario but I can utilize Axios, async/await, and TypeScript to navigate it

Having trouble creating a workflows list from an axios response Error: Argument of type 'Promise<unknown>' is not assignable to parameter of type 'SetStateAction<WorkflowForReactFlowProps[] | null>'. Here's the Axios c ...

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

Is it possible to execute JavaScript within an Android application?

Is there a way to utilize the javascript provided by a website on an Android device to extract and analyze the emitted information? Here is the javascript code: <script type="text/javascript" src="http://pulllist.comixology.com/js/pulllist/5b467b28e73 ...

Distribute divs of equal width evenly within a grid

I'm facing a unique challenge at the moment. I'm attempting to create a grid system where all elements have a fixed width of 200px each. What I envision is a clever grid setup using only CSS, where each "row" will strive to accommodate as many el ...

What is the best locator to use for this specific input field in the code?

Can someone help me figure out how to locate and fill in another input field in the code snippet below? '<input _ngcontent-tvt-19="" class="form-control ng-pristine ng-valid ng-touched" placeholder="You can search keywords" type="text"> I&apos ...

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

Navigating Time Constraints and Error Management in the World of Facebook Graph API

I'm currently working on a program that involves numerous fql and graph calls, but I'm facing difficulty in handling 'get' or 'post' errors. Can anyone provide guidance on how to implement retry functionality when these errors ...

Retrieving data with JQuery when encountering an XHR error

When I send a jQuery AJAX request and receive a successful response, I am able to retrieve my JSON data. However, if the response code is anything other than 200, I am unable to access the data in the jQuery callback function. This data is crucial as it co ...