My transition in an accordion list is using cubic-bezier(0.68, -0.55, 0.265, 1.55), but the issue I am facing is that the content below is also 'jumping'.
Does anyone have suggestions on how to create space below my accordion (ul list) so that when it opens it does not affect the entire content below?
I can't find a better way to explain this, so I will include a preview.
Please take a look at the 'tags' moving around. Jsfiddle: jsfiddle.net/dzvbtqLa/
Give this a try :
-webkit-transform: translateZ(0);
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-moz-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-o-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-ms-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
Hey there, feel free to check out this solution:
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transform: translateZ(0);
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-moz-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-o-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-ms-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
}
.panel-body
{
text-align:justify;
}
Although this may be an older issue, I recently encountered the same problem and was able to determine the root cause of the sudden jump in animation.
Essentially, when animating for height or max-height, if the default value set is larger than the actual content within the container, a glitch occurs where the animation appears to 'jump'. Here's what happens:
Unfortunately, the only workaround for this issue seems to involve using jQuery. This can be frustrating as it requires additional effort to control the type of animation (e.g. resorting to slideUp() + slideDown(), rather than utilizing a more precise cubic bezier animation).
content: string; this.content = "There was an issue processing your request. Please try using the browser back button."; .content{ white-space: pre-line; } <div class="card-body text-center"> <span class="content"> {{ content }} </span& ...
On my website, I have implemented a convenient offcanvas sidebar using Bootstrap 5. This sidebar contains html bookmark links that allow users to quickly navigate to specific points on the page by clicking on them. Here is an abbreviated version of the cod ...
My Cordova app has an email sending function that utilizes jQuery. During debugging, the ajax function works perfectly in my browser, but once I build the app and test it on my phone, it stops working. I encountered a similar issue before, which was resolv ...
How can I upload a file via Ajax post in HTML without clicking the button? Currently, my code only works after clicking the bootstrap button. My current implementation is as follows: $(document).ready(function () { $("#but_upload").click(function () { ...
In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS. //The CSS used is as follows body {display: none;} /* Function to calculate div block height */ function re ...
Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...
I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...
I'm experiencing an issue with my web-page where two buttons at the top are not responding to a sorting function on the nested #byFilter. Despite trying to apply the onclick(function()) method, it doesn't seem to work. Javascript $(document).re ...
I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...
Looking for help with formatting rows and columns in an ASP GridView. The rows are automatically colored alternating, and I want to make the content in every first column bold and every second column normal. I have heard about using CSS nth-child() to achi ...
Is there a way to increase the height of a div each time it is clicked? I had an idea to add an extra CSS class to a div whenever a button is clicked. Here's how the concept might look: #divToBeDoubled { height: 100px; &.doubleHeight{ ...
I am trying to figure out how to restore the state of checkboxes in an ORACLE APEX tabular form. The selection is made in the first column using the APEX row selector f01. After saving the checkbox state in a collection and then transferring it to an arra ...
Below is the code snippet that illustrates the objective I am attempting to achieve <div> <div style="float:left; width:220px; height:300px; border: 1px solid #aaa"> Left div <br>float:left <br> fixed width 220px </div> ...
I am currently working on a project that incorporates jQuery, AJAX, JSON, and Perl. To handle the backend operations, I am utilizing Perl along with its CGI module to generate a JSON object. #!/usr/software/bin/perl5.8.8 use strict; use warnings; use CGI ...
Whenever I try to access the camera on my mobile device through a web app, I encounter an issue. While the camera works perfectly fine on the web version, it fails to show up on my mobile device unless I add https:// in the URL. How can I resolve this prob ...
In my HTML code, the attributes of buttons (such as "AAAAA") will change based on external events. This real-time update is achieved through AJAX pooling. <div class="parent"> <div class="group"><button title="AAAAA"/></div> <di ...
I'm currently working on a webform that utilizes knockout.js. In one section of the form, I need to retrieve a value based on the selected item in a select list. Here's the snippet of code from my viewModel: self.discoveryForms = ko.obse ...
After migrating to webpack for managing our assets (js, scss, ...), everything seemed to be working smoothly. However, we encountered a minor issue where the input label behind the file-selector-button is overflowing with its neighbor, as shown in the exam ...
My current solution is functioning perfectly: textarea. #{myObject.myVar} Despite the success, Jade throws a warning when compiling the file: Cannot read property 'myVar' of undefined This warning makes sense since myObject may not be p ...
I have completed the implementation of all UI components, which are visually appealing. https://i.sstatic.net/hxJQr.png Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'ye ...