Animate a div when a boolean value is toggled

I am in the process of changing the card mode by utilizing a boolean variable called editMode. Whenever editMode === true, additional content displays in the child div causing an increase in both height and width of the parent div. My goal is to apply a transition effect to this expansion of the parent div specifically when editMode is equal to true. Currently, I am coding in Vue.js.

Any ideas on how I can achieve this?

<div class="parent">
    <h2> Card Title </h2>
    <div class="child" v-if="editMode">
        some content including inputs, labels, ...
    <div>
    <button @onClick="editMode = !editMode"/>
</div>
javascripthtmlcssvue.jscss-transitions

Answer №1

After implementing vuetify-transitions, I successfully tackled this issue. It turned out that the parent dive was nested within another wrapper component, but by applying transitions to the wrapper, I was able to resolve it.

Answer №2

Live Example :

new Vue({
  el: '#app',
  data: {
    editMode: true
  }
})
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="parent">
    <h2> Card Title </h2>
    <transition name="fade" :css="true">
      <div class="child" v-if="editMode">
          some content including inputs, labels, ...
      </div>
    </transition>
    <button v-on:click="editMode = !editMode">Toggle Edit Mode</button>
  </div>
</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

Text below div will be displayed

When hovering over a div, an identical one will appear next to it with more information. Unfortunately, the content appears under the div but retains the styling like border-radius and background color. This is how my HTML looks: The div that needs ...

jqueryhtmlcss

Edit the contents within HTML strings without altering the HTML structure

If I have a string of HTML, it might look something like this... <h2>Header</h2><p>all the <span class="bright">content</span> here</p> I am interested in manipulating the string by reversing all the words. For example ...

phpjavascripthtmlstring

Trouble with X-editable linking to database for updates

Utilizing the X-Editable plugin within my PHP application to update fields in a table and utilizing a POST file to update the database. Below is the form code: <table id="restaurant" class="table table-bordered table-striped"> <tbody> ...

javascriptphpjqueryx-editable

What steps do I need to take to design a menu?

I need assistance in organizing my menu with submenus. The code I currently have successfully retrieves all the submenus, but I would like to categorize them accordingly: For instance: Main Menu - Submenu 1, Submenu 2, Submenu 3 How can I go about categ ...

phphtmlcss

Broadcast a public message with the sender specified using Socket.io

As I dive into using socket.io, I've managed to send private messages successfully. However, I'm now curious about how to send a message to all users at once. In the code snippet below (used for testing purposes), the first user receives a privat ...

javascriptnode.js

Sending multiple error messages from PHP to jQuery as an array, encoded in JSON format

Having some difficulty outputting multiple errors as arrays from my PHP file in JSON format to jQuery. Typically, PHP data can be encoded as JSON and then sent to jQuery for displaying the code as either an Ajax success or error response. Everything works ...

phpjqueryhtmlarraysjson

What is the best way to access the Vue slot property within JSX?

I have encountered a dilemma where I am using a child component with template syntax that includes a slot to pass the 'item' property to the parent component. However, the parent component uses JSX syntax and I am unsure of how to access the &apo ...

vue.jsjsxslot

The CSS background color does not appear within a nested <DIV> element

I am struggling to make the yellow background color appear with the nested divs in three separate columns. Can someone help me figure out what I am doing wrong? <div id="wrapper"> <div class="rightside"> Test </div> <div c ...

csshtmlbackground

Maintaining photo proportions in HTML when using width and height as percentages

Is it possible to specify width and height as percentages in the <img> attributes? It seems that when I attempt to do so, the image resizes but the quality appears skewed. Here is an example of my markup with fixed attributes: <img src="#" widt ...

htmlimageimage-size

What is the best way to eliminate all frames from the current windows using jQuery?

When transitioning to another page from my center frame, I need to ensure that the top and bottom frames are not visible in the new page. This will prevent my spinner or footer from showing up on the page I'm navigating to. Is it possible to achieve ...

javascriptjqueryhtml

Tips for changing the selected value in a drop-down menu

I have developed a drop-down menu along with several text fields on my HTML page that retrieve option values from the database. The selected values are being inserted into my database table successfully. However, I am facing an issue while attempting to ed ...

phphtmldrop-down-menu

Is there a way to navigate through the various components of an OBJ file that has been loaded using OBJMTLLoader

I recently created a building model using 3DS Max, where each room is represented by a modified cube. To load the OBJ file along with its corresponding MTL, I utilized OBJMTLLoader. However, my current challenge lies in highlighting specific rooms based on ...

javascriptthree.jsmeshdat.gui

Angular: Dynamically changing checkbox's status from parent

I'm in the process of developing a switcher component that can be reused. The key requirement is that the state of the switch should only change after an API call is made at the parent component level. If the API call is successful, then the state cha ...

javascriptangularcheckbox

Troubleshooting: Difficulty with svg mask function when implementing an svg image in a react.js environment

I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/ <img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB ...

jquerycsssvgreactjsmask

The JavaScript code is not being executed, as the address bar displays the function name instead

In my project, I have created numerous "js-classes" with various functions spread across different files. Unfortunately, the codebase is too large to share entirely. However, towards the end of the project, I encountered a bug where a specific function wa ...

javascripthtml

Importing modules dynamically in NextJS allows for the loading of

I have a basic function that is responsible for loading a script: const creditCardScript = ( onReadyCB, onErrorCB, ) => { let script = document.createElement("script"); script.type = "text/javascript"; script.src = process.CREDIT_CARD_SCRIPT; ...

javascriptnode.jsreactjsnext.jsreact-loadable

Navigating through web pages in PHP

Is there a way to implement page navigation in PHP without reloading the entire page, similar to how Facebook operates, but without using jQuery or JavaScript? For example: For the welcome page: <a href="http://www.facebook.com/?sk=welcome"rel="nofoll ...

phphtmlasynchronoushyperlinknavigation

Encountered a 404 error while utilizing the Java - Angular web service

Encountering an error 404 in Firebug when attempting to send an object from Angular to a Java controller using JSON. While the backend in Java is able to receive the message, Angular is unable to find the specified path. Consequently, there is an issue wit ...

javajavascriptjsonangularjs

Display a div exclusively on a certain page and ensure scripts are loaded from various files simultaneously

I have defined a div with the name uname in a file named header.html. I want to hide this div on only two specific pages, which are home.html and dash.html. The header.html file is loaded on both of these pages. How can I achieve hiding the uname div on h ...

javascriptjqueryhtml

Creating a periodic updater in Prototype.js that will hide elements of a specific class based on the response from an AJAX request

I am currently working on a Periodical Updater using prototype js, and my goal is to hide every element on the page with the class='robot' based on the response received from an AJAX request. If the response matches hidethemall, I want all elemen ...

javascriptajaxprototypejs