Having trouble with VueJS transition not triggering on "enter"?

I am attempting to create a simple collapsible menu transition. The code for my element is as follows:

<transition name="settings">
    <div v-show="!settingsCollapsed">
    </div>
</transition>

Here is the CSS associated with it:

.settings-enter {
  max-height: 0px;
}
.settings-enter-active {
  max-height: 200px;
  transition: all 1s;
}
.settings-leave {
  max-height: 200px;
}
.settings-leave-active {
  max-height: 0;
  transition: all 1s;
}

While the menu slides up correctly, there seems to be an issue when it's sliding down as the animation doesn't occur smoothly. It looks like .settings-enter class is skipped and only .settings-enter-active is applied directly after being hidden.

If you have any suggestions on how I can resolve this problem or if there are alternative methods for animating a collapsible menu, please let me know!

cssvue.jstransition

Answer №2

At last, I've cracked the code! The key was to include !important in the enter class:

.preferences-controls {
  overflow: hidden;
  height: 100%;
  max-height: 999px;
  transition: all 1s;
}
.preferences-enter {
  max-height: 1px !important;
  opacity: 0 !important;
}
.preferences-enter-active {
  max-height: 999px;
  opacity: 1;
  transition: all 1s;
}

I'm a bit puzzled as to why this solution works because I believed that the transition class would override the default class styles. If anyone can shed light on why this method is effective, please share your insights.

A big shoutout to @saurabh for lending me a hand!

Answer №3

Check out this demo: http://jsfiddle.net/25bqhk1h/

Instead of using max-height, consider experimenting with height or min-height.

Take a look at this fiddle using min-height: jsfiddle

However, when trying to use max-height, you may encounter issues: jsfiddle

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

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...

javascriptjquerycssknockout.jsknockout-3.0

Creating a perfectly centered card using Bootstrap 4, both horizontally and vertically

I'm struggling to vertically center a card (or container). Although I can center it horizontally, the vertical alignment is proving to be difficult. Despite trying out various code snippets from Stack Overflow and other websites, none of them seem to ...

htmlcssbootstrap-4

React CSS modules are a powerful tool for styling components in

Having some difficulty with css modules in react, I am unsure how to utilize react modules dynamically. import classnames from 'classnames' import styles from './hover.module.css /// /// const [flashElements,setFlashElements]=useState(elemen ...

javascriptcssreactjs

Switching the Cursor Image When Hovering Over a Different Image with JavaScript or jQuery

I have been trying to implement a feature where I hover over an image and a custom cursor (150x150) appears. Despite my best efforts, the hover effect is not as smooth as I would like it to be. Can someone please provide guidance on how to achieve this sea ...

javascripthtmljquerycssz-index

Unique way of specifying background position for Firefox and Chrome browsers

Currently, I am utilizing an image as the background in a div and I am interested in using different positioning attributes for Firefox and Chrome. For Mozilla, I plan to use: background-position: left -14px bottom -1px !important; And for Chrome, I int ...

htmlcss

Keep scrolling for scheduled chat availability that disables upon user engagement

Currently, I am working on developing a web Chat system that allows users to send messages to their friends. However, I am facing an issue with auto-scrolling new messages using jQuery. The pertinent files for this matter are: messages.php <div class ...

javascriptphpjqueryhtmlcss

Creating a cohesive look with a background gradient and image simultaneously

Short Version Is it possible to have both a background color with a linear gradient and a background image at the same time? Long Version I have styled a table with a vertical linear gradient in the header, as shown below: table { white-space: no ...

htmlcssbackgroundbackground-image

Solving the naming convention issue in Vue components with @typescript-eslint workaround

We currently have a rule activated that can be found at the following link: here By default, this rule does not allow PascalCase in an object literal, causing problems with vue components export default defineComponent({ name: 'MyComponent', ...

vue.jseslinttypescript-eslint

If the window width is less than the specified value, hide the DIV and replace it with a

I came across a discussion about hiding a div if the screen is narrower than 1024px, and I'm looking to implement something similar based on the quoted code below. Essentially, I want to hide one div (id="krug_wide") if the window width is less than 1 ...

javascriptjqueryhtmlcss

My CSS skills are put to the test in the latest version of Safari, as they only seem to work when I move

I have been working on a CSS menu for a website and have made it work perfectly on Firefox, Chrome, and an old Safari version. However, I encountered a strange issue with the latest Safari version (6.0.2 on Lion). When the page is fully loaded and I hover ...

htmlcssmenubariweb

How can I prevent scrolling in a Vue mobile menu?

In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as exp ...

htmlcssvue.js

Issue with Vue (version 2.6.14): Unable to display data using v-for when importing data from an API through axios

Planning I am in the process of creating a display for activities with filters sourced from an API provided by the CMS. The code does not include the filter details as they are not pertinent to this discussion. Issue When I manually define the 'items ...

javascripthtmlvue.js

Utilizing CSS to style text on a menu by applying a specific class to an unordered list element

Is there a method to use CSS to invoke a div id function that will highlight text when the mouse hovers over it? <ul class="sub-menu"> <li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721">< ...

htmlcss

Position the button to the right using the Bootstrap float-right class

Currently, I am utilizing reactstrap within my React component. My primary intention is to position a button to the right side of the container but unfortunately, the following code doesn't achieve the desired result: <td class="col-md-4 clearfix" ...

cssbootstrap-4

Scrolling vertically using window.open functionality

I am trying to open a pop-up window using window.open. I would like the scrollbars to appear only if necessary. Unfortunately, in Safari, the scrollbars do not show up unless I include scrollbars=1 in the code. However, this also causes horizontal scrollb ...

javascriptcsspopup

How can I pass a data object to a backend function and use it to dynamically create a new table row in VueJS?

I am looking for a way to pass an object through a function and then dynamically add a table row with the data from that object. In my backend, I need to first send the "row" object to the function. While I know how to add table rows using vanilla JS and j ...

javascriptvue.js

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

Visit the following website: I have implemented font-face on my site: @font-face { font-family: 'SegoeUI'; src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), url(' ...

cssfont-face

`How to Customize the Branding in a Laravel Jetstream Project`

I recently started working with Laravel and am currently attempting to switch out the logo in a Laravel application that utilizes Jetstream and Inertia. After carefully reviewing the documentation and various resources on Laracasts, I've learned that ...

phplaravelvue.jslaravel-bladelaravel-jetstream

Top section of a table repaired

It seems that the position fixed attribute is not working as expected in this scenario. I might be missing something. I'm trying to keep the input boxes in the first row frozen when scrolling, but none of the solutions I've found seem to be effe ...

jqueryhtmlcsshtml-tablesass

Images positioned absolutely do not function with links

It seems that the link on line 44 only works when I remove 'position absolute' from my images. I have tested this issue on various browsers including opera, firefox, IE, safari and chrome. I attempted to change the z-index of my link but did no ...

htmlcss