CSS transition effect to show content: display: block

After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why?

When a button is clicked, the class .show is applied to the contactEmote div:

#contactEmote{
    display: none;
    top: 0px;
    background-color: #f65b61;
    width: 100%;
    z-index: 2000;

    opacity:0;
    clear: both;
    height: 0px;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;


    -webkit-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
    -moz-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
    box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
}

#contactEmote.show{
    top: 0px;
    display: block;
    height: 100px;
    opacity: 1;
    padding: 8px;
}

Answer №1

If you're switching the display property back and forth from block to none, you won't be able to smoothly transition elements. Consider using visibility: hidden and visibility: visible instead.

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

PHP and AJAX issue with numerical formatting

I have a text box formatted with the following syntax: $("#cont_dt").blur(function(){ $(this).format({format:"#,###.00", locale:"us"}); }) It works fine. For example, if I type 250000.50, it automatically formats to 250,000.50 However, the prob ...

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

A guide on utilizing Python with Selenium to navigate to a specific field within a frame

I am seeking assistance in using Selenium with Python to target a specific element that seems to be located inside a frame. Specifically, I am attempting to select the element with 'id' = 'kiadvany_cim' within what appears to be a windo ...

Exploring the power of Ionic and AngularJS in making secure HTTPS Post Requests

I've been attempting to make a request to an HTTPS server via the post method within my Ionic app, but I keep running into issues. I've tried two approaches so far - one using $http, and the other using $.ajax. Unfortunately, neither method has y ...

What is the best way to differentiate between two CSS elements with the same class name?

I ran into an issue where two elements share the same class name, specifically "img" Is it possible to apply different styles to these elements that are nested under different parent classes, despite having the same class name? I am trying to customize t ...

Can you please adjust the image to the right side?

I'm having trouble aligning the image to the left in my code. It always seems to leave a margin on the sides that I can't figure out how to get rid of. https://i.sstatic.net/kKwII.jpg This is the snippet of my code: <section class="conta ...

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

The variable ajax is not defined

Encountering a bug with my code. When using ajax to display the table, it's showing an error for undefined variable: output. Here is the relevant code snippet: In the Accounts Controller: function get_accounts() { $accounts = $this->Model_adm ...

Iconic Navigation: Bootstrap 3 Navbar featuring Carousel

I'm currently in the process of developing a website using bootstrap3. Despite watching numerous tutorial videos, I am still facing challenges. One of my goals is to have the logo on the navbar aligning with the left side (which I've achieved ...

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

Rotating arrows enhance the functionality of the accordion menu

I have successfully implemented a basic accordion with rotating arrows on click. Everything is working smoothly except for one issue: When I collapse one item and then try to collapse another, the previous arrow does not return to its default state. Is ...

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

The Chrome Extension Javascript popup appears to be empty

Feeling a bit lost on my first attempt at creating a chrome extension. Check out my manifest.json below: { "manifest_version": 2, "name": "Get Offensive Wallpapers", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], ...

How to centrally position an image within a cropped parent container using CSS

Is there a way to center an img within a parent div tag that has overflow: hidden set? I am looking to clip the image equally on both sides in order to display the middle portion. <div class='wrapper'> <img/> </div> The desi ...

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...

Filtering HTML tables to display only one instance of each value

I have a 300x11(rowXcolumn) html table that I wanted to filter like Excel or Google Sheets's filter. Upon researching, I came across the code below on a website. While it works as desired, there is an issue where it displays the same value multiple ti ...

Alert: An error message is displayed despite completing the required field

My apologies in advance as I am new to coding and there may be a glaring mistake in my current project. I am creating a survey that requires participants to enter their age. The demographic data questions are organized in a table format, with code borrowed ...