Enhance the appearance of ng-class with a stylish CSS transition effect

I have been attempting to add a transition duration for when my trash-content is displayed. I tried implementing a solution I found on Show hidden div on ng-click within ng-repeat, specifically the variation recommended by Joseph Silber. However, I am puzzled as to why it works in his example but not in mine. My goal is to have the div resize slowly.

HTML section

<div id="trash" ng-app="myApp" ng-controller="test">
    <div class="trash-content" ng-class="{ 'hidden': ! showDetails }">
        <ul>
            <li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>
            </li>
        </ul>
    </div>
    <button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
</div>

CSS section

.trash-content {
    width: 300px;
    height: 400px;
    background-color: lightgrey;
    border: 1px solid #e0e0e0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
    color: rgb(102, 103, 105);
    overflow: hidden;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
}
.hidden {
    max-height: 0;
    max-width: 0;
}

Check out the issue on Fiddle : http://jsfiddle.net/63xoxx37/1/

Answer №1

Give this a shot (try using the property opacity:0; instead of display:none;):

.trash-content {
    width: 300px;
    height: 400px;
    background-color: lightgrey;
    border: 1px solid #e0e0e0;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
    color: rgb(102, 103, 105);
    transition: 2s linear all;
    -webkit-transition: 2s linear all;
    opacity: 1;
}
.h {
    max-height: 0;
    max-width: 0;
    opacity: 0;
   }

    <div id="trash" ng-app="myApp" ng-controller="test">
        <div class="trash-content" ng-class="{ 'h': ! showDetails }">
            <ul>
                <li class="trash-li" ng-repeat="e in elems"> <a>{{e.title}}</a>

                </li>
            </ul>
        </div>
        <button id="trash-btn" ng-click="showDetails = ! showDetails" ng-class="{ 'big': showDetails }">Trash</button>
    </div>

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

What is the best way to ensure consistency in a value across various browsers using Javascript?

I am currently developing a feature on a webpage that displays the last update date of the page. The functionality I am aiming for is to select a date in the first input box, click the update button, and have the second box populate the Last Updated field ...

Getting Javascript as a string using Selenium in Python

Is it possible to retrieve JavaScript code using Python Selenium? Specifically, I want the JS code as a string. function validateForm() { var x = document.forms["myForm"]["Password"].value; if (x.length >= 6) { } } ...

Tips for activating a JavaScript event on a specific webpage only after it has been accessed by the user from a different page

Is it possible to initiate a JavaScript or jQuery event when navigating to another page? For example: I am currently on index.html From index.html, I click on a link to contact.html; Upon reaching the contact.html page, I wish to trigger an event Thank ...

Using HTML5 to implement a progress bar that updates on click

I currently have an HTML file that contains clickable content. <tr onclick="callfn('Afile.jsp?param1=<%= value1%>');" id="contenttr"> The function callfn is located in a JavaScript file that loads images. Because this function can t ...

How to handle blank property values in JavaScript objects and convert them to null in an ASP.NET Web API

Hey there! I'm facing an issue where when I post a JavaScript object to an ASP.NET Web API, some property values are blank like the example below: var o={ ID=1, Fname="Tom", Mname="", Lname="Wilson" } However, in the Web ...

What is the best approach to implement a Single Page Application with a simple placeholder page in the forefront?

Recently, I've been running my developer app on a single Heroku instance. Both the API and Angular app are being served from an Express.js server. In addition, there is a separate front-facing sales page located at the base domain. As I am preparing f ...

What is the best way to populate a form with a randomly generated number and still give the user the ability to enter their own information? My tool set includes HTML, PHP, and MySQL

In my internet applications course, I am working on creating a silent auction. My task involves developing a form for bidders to input their information in order to place bids. The bidder form has already been coded, but I am wondering how I can generate ...

Having trouble with the functionality of CSS and JavaScript on styled input buttons in modern browsers? (IE 8/9, FF 9)

I am currently developing a website that includes input buttons styled with CSS as part of a form. For example, check out the sample code below: <input type="submit" name="buttonSave" value="save" id="buttonsavejs" class="button_image button_style"/> ...

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

Having trouble with Onsen UI Infinite List? It seems that setting the modifier as 'longdivider' is not functioning correctly

Within my web app, I am utilizing an infinite list feature. This is the angular code snippet responsible for generating the list: unverifiedPicturesInfiniteList.delegate = { createItemContent: function(i) { var pictureObject = $scope.unverifiedPict ...

Capture the incoming path and direct it back after the user logs in

I'm currently facing a challenge with my app that has a login feature and a dashboard with threads. Each thread has its own unique URL address. The issue arises when I want to share the thread URL with someone who is not logged in, as they would need ...

CSS Duo-Toned Background

I've been searching everywhere for a solution to this issue. I have a design that I'm attempting to code using divs and CSS. The top half of the image features a gradient that transitions from left to right with different colors. My struggle lies ...

What is the best way to retrieve the latest state after applying useEffect to trigger an onChange event for an element?

I am encountering an issue with an input field in my component that requires an onChange event to update the state. Despite binding the onChange event on mounting the component, the state remains unchanged as the onChange event seems to have the initial st ...

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

Utilizing various APIs with distinct Authentication headers concurrently within an Angular JS application

Hey there, I'm new to AngularJs and could really use some advice or help from you guys! I'm working on an app that allows users to login and check their current location in a building using the Cisco CMX server. This server calculates the user&a ...

What might be causing the issue with the reload feature not functioning properly for a

I have attempted various codes, but none of them seem to work. My goal is to refresh only a specific section every 5 seconds without reloading the entire page. It is crucial not to refresh the whole page because there is a chat function involved, and users ...

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

Refresh only a portion of a page using PHP and JavaScript

I have a webpage set up with multiple sections in separate divs. Currently, the essential divs required are <div id="main">...</div> & <div id="sidebar">...</div> Each div contains PHP code like: <?php include("page.php") ...

The NavigationManager.NavigateTo method is causing issues with the scroll click functionality, so I can't rely on href links as they do not have the necessary force

I'm currently working on a Blazor Server web app using .NET 5. I've encountered some challenges with navigating between pages in my web app: When I utilize NavigationManager.NavigateTo(uri, true), I find that I can't open links with a scro ...

Disable the setTimeout() function in order to prevent the countdown from refreshing

I have a JavaScript countdown function that is working well, but I am unsure how to stop and refresh the timer to extend the time. When I call the function again before it times out, it behaves strangely by showing two countdown timers because the updateTi ...