Animating an element when another one fades away

const myVueInstance = new Vue({
  el: '#app',
  data: {
    showBlueElement: true
  }
})
.a, .b {
  height: 50px;
  width: 50px;
  background: red;
}

.b {
  background: blue;
  transition: transform 1s ease-in-out;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="showBlueElement" @click="showBlueElement = !showBlueElement"></div>
  <div class="b"></div>
</div>

Is there a way to animate the transition of the second element (blue) towards the top instead of an instant change?

Answer №1

Slide up red box using animation to hide it.

new Vue({
  el: '#app',
  data: {
    visible: true
  },
  methods:{
    hide: function(){
      document.querySelector(".a").style.height = "0px";
      console.log(document.querySelector(".a").style.width);
    }
  }
})
.a, .b {
  height: 50px;
  width: 50px;
}

.a{
  background: red;
  transition: 1s;
}

.b {
  background: blue;
}
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46303323067468726872">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <div class="a" v-if="visible" @click="hide"></div>
  <div class="b"></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

Passing an event from Electron's IPC renderer to Vuex

Greetings, fellow developers! I'm currently working on an app that involves multiple windows. My App is built using Vue + Electron technology stack. One of the key features I am trying to implement is triggering actions in Electron to open a popup, fo ...

Differences between React Router's createBrowserRouter and Browser RouterWhen it

As I embark on a fresh React endeavor, my goal is to incorporate the most up-to-date version of React Router. According to the documentation, createBrowserRouter is the preferred choice for web projects. While they mention that it allows for certain data A ...

Executing a REST call only when the previous one has successfully completed

Is there a way to execute a second REST request only after multiple successful responses from the first one? I have noticed that while in a normal state these requests are executed sequentially as required, issues arise when dealing with a large number o ...

"Utilize Node.js to seamlessly stream real-time Instagram photos based on a designated hashtag

Does anyone know of a node.js library or solution that can automatically fetch Instagram photos in real-time based on specific hashtags? ...

Update the second mouse click functionality using jQuery

I currently have a jQuery function integrated into my WordPress portal that manages the functionality of the menu and the display of subcategories to ensure proper mobile optimization. This code, which was created by the theme editor, handles these aspects ...

Error Module in Angular 1.4.2: $injector:modulerr

I have exhausted all the solutions available on StackOverflow and other sources, but none of them seem to work for me. I have ensured that all scripts are loaded properly. I am using Visual Studio 2015 and trying to create a menu using Mobile Angular Ver ...

Finding and implementing the page URL in JavaScript

Basically, I only want a certain script to be called if the URL is not "blogs.html". Here are some examples where the script should NOT be called: mydomains.com/blogs mydomains.com/blogs.html And here are some examples where the script should be called: ...

Can you suggest an alternative for the "return" statement within a "for loop" in order to retrieve all values from the loop?

When using numInOrder + " : " + nameInOrder;, the console only displays one value: "1 : a". However, I would like to see: "1 : a 2 : b 3 : c 4 : d 5 : e 6 : f" in the console.log output. Additionally, I do not want to use consol.log(numInOrder + " ...

Which is better for managing checkbox state in React - react-bootstrap or material-ui?

Currently, I am working on a project that involves using checkboxes within a component to display products based on specific features selected by the user. I am seeking advice on how to effectively manage the checkboxes and their corresponding state inform ...

Unusual "visual" phenomenon with autocomplete feature in VUE.js

Can someone review this code snippet? Check out the code here This is a peculiar example of a custom autocomplete VUE component. If you enter a value in one of the fields in Section 1 (like 'Apple'), then click on the Next button, you'll ...

increase the current date by 12 months

Hello there! I am looking to increase my current date by 12 months and decrease it by 1 day. For Example : valStartDate :2018-01-20 expected_date:2019-01-19 Unfortunately, I encountered an error while trying the following code: "getFullYear() not a ...

Node.js throwing error due to incorrect format of bind parameters as an array

I have been working with Nodejs/express and trying to implement a paramerized query in my API. However, I encountered the following error message in my console: Bind parameters must be array if namedPlaceholders parameter is not enabled Below is a snippet ...

Validate the button's status in Ionic

When I click on a button, I am trying to retrieve the Toggle state immediately. However, I consistently receive a value of true, even when my toggle is actually set to false. I believe the issue lies in how I am manipulating the DOM. Here is an example ...

Angular's alternative to JQUERY for handling file uploads and multipart forms

My multipart form includes a simple file upload: https://i.sstatic.net/sRFH7.png I would like to customize it to appear like this: https://i.sstatic.net/dMiDS.png Although my initial solution works well, here is the code snippet: HTML snippet <div ...

Configuring a timeout for your Next.JS API can help optimize the performance

Due to restrictions on another API, my own API takes 10 minutes to return a result. When running locally, I am able to wait and successfully receive the data after 10 minutes. However, when deployed on Vercel, I encounter a timeout error (status code 504). ...

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

*Decoding the Mystery of $t in Vue.js*

My first experience working with Vue.js and I am unsure about the usage of $t. I came across some code that looks like this: <li class="category-filter__back"> <button class="category-filter__button" @click="back(categoryPath)"> ...

Dealing with infinite loop while verifying cookie in angularjs

In my client-side code, my goal is clear. If the user has the cookie, they are authenticated; otherwise, they are redirected to an authentication endpoint on the server. (function() { 'use strict'; angular .module('App', [ ...

The operation state.concat cannot be performed as it is meant for arrays and not for type 'ITask'

Trying to incorporate an array into my store is causing issues with the following error popping up at tasks: payload.payload ? [ ...state, payload.payload ] : []: Error:(22, 35) TS2461: Type 'ITask' is not an array type. Any suggestions on how t ...

Modify the value of a CSS property through JavaScript

Hey there, I'm wondering how to change a CSS value of the document itself, rather than targeting a specific element. I've already looked into solutions like Change :hover CSS properties with JavaScript, but they all involve adding CSS rules. I a ...