How to prevent mobile menu transition in Vue when changing routes?

I'm looking for a solution to disable the mobile menu transitions when changing page routes in my app. Initially, I noticed that the menu would stay open when switching pages. To address this issue, I added a route watcher to automatically "close" the menu when the page route changes. While this solution works, I find it a bit clunky as the menu closes after the page has already changed due to the vue transitions being applied. How can I close the menu without triggering the transitions?

  export default {
      name: "Menu",
      data() {
        return {  
          activeMenu: false,
          menuTransition: null 
        };
      },
  watch: {
    $route() {
      this.activeMenu = false;
    }
  }
    };

Here is an example of one of the menu items:

 <transition :name="menuTransition">
              <ul
                class="dropdown-menu"
              >
                <li>
                  <router-link to="/page2"
                    >Page 2</router-link
                  >
                </li>
              </ul>
            </transition>

Answer №1

If you want to prevent a transition from occurring immediately after a route change, simply add the notransition class. Afterwards, you can remove this class to allow transitions to function as normal.

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

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

Determine the frequency of keys and transform the data into an array of objects, with each object corresponding to a key and its frequency

Illustration of Frequency Count [ { language: 'JavaScript' },{ language: 'JavaScript' },{ language: 'TypeScript' }, ] CONVERSION TO = [ { language: 'JavaScript', count: 2 }, { language: 'C++', count: 1 ...

No data is retrieved when using multiple filters

I am facing an issue with my getData function in the app.component.ts. It is not returning the query with all the arguments for the API Request. Strangely, I do not encounter any errors and even when trying to use console.log inside the function, it does n ...

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

Conceal Element in React if it is the Final Item

Is there a way to hide the TimelineConnector if it is on the last item? I am looking for some guidance on how to achieve this. Please take a look at my codesandbox below: CLICK HERE {timelines.lastIndexOf(index) !== 1 ? <TimelineConnector /> : &quo ...

Receiving an error stating that .startsWith() is not a function in react native

I'm having trouble searching for items using a search bar. The original items are in 'prod', but I keep encountering errors such as 'startsWith() is not a function' and sometimes '.toLowerCase() is not a function'. const ...

Is there a way to apply the active class without relying on an anchor element?

After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

Remove objects from array that have any falsy key

Is there a way to filter this array to only include objects with truthy values for keys? For example, here is an array: [ { foo: NaN, test: 'String' }, { foo: 2, test: '' }, { foo: 3, test: 'Something' }, ] I want ...

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

An expected expression was encountered near the if condition

I am encountering an expression expected error in Visual Studio near if(isNullOr ........ if (value) { if (isNullOrUndefined(x.value) && isNullOrUndefined(x.value2)) { x.minMark + '-' + a + '*' + x.b + ' ' + ...

Code snippet for scrolling in increments with Selenium WebDriver using JavaScript

Is there a way to scroll incrementally instead of directly jumping to a specific position using driver.executeScript("scroll(0,1000)")? I attempted the code below without success... for (var i = 10; i < 2000; i += 50) { driver.executeScript("scroll ...

How can you specify the environment in Google Tag Manager?

I have integrated google tag manager and google analytics using the vue-gtm plugin found at vue-gtm Within google tag manager, I have set up 3 environments under the same container. In a user-defined variable called GA from environment, I have created a ...

Are `<text>` nodes unable to utilize ligature fonts in CSS/SVG?

Check out this JsFiddle demo: http://jsfiddle.net/d0t3yggb/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="material-icons">add add add add</div> <svg width="100%" height="100% ...

Fetch Timeout Issue in React Native

I am currently using fetch to retrieve data from a server. Unfortunately, I am facing issues with setting a timeout for the fetch request in case the server does not respond. This is my global fetchData class: fetchGetResp(url, token) { return fetch( ...

Issue with Vue.js 2: Image tag disappears following re-render when fetching data from the server

Working with vuejs in my project was going fine until I encountered this issue: on my page, I have a data grid with an image carousel called "Owl carousel" and the code looks like this: fetchData: async function () { let self = this let query = se ...

Struggling with utilizing data encoded by PHP into JSON format when working with JavaScript to showcase graphs using the chart.js library

My goal is to showcase a graph using the chart.js JavaScript library. I am retrieving data from a database in PHP and passing it to JavaScript using the json_encode() method to convert it into a JavaScript variable. The data consists of two fields from a & ...

Add a class if the particular class is missing from the webpage

Seeking a solution in JS, I am facing a challenge in creating a series of elements with active states, each opening a caption below when clicked. Utilizing .addClass, .removeClass, and .toggleClass in combination, only one element can be active at a time. ...

Excluding null values when using Mongoose populate query: A simple guide

I'm currently working on an app where I've defined 2 models. const UserSchema = new Schema({ _id: Schema.Types.ObjectId, account:{ type: String, unique: true }, email: String, first_name: String, last_name ...

Conceal the Div containing the specified class

I was hoping to hide the first DIV if the second DIV is displayed on the front end, and vice versa upon page load. If the first DIV is set to 'block,' then the second DIV should be set to 'none.' And If the second DIV is set to &apos ...

Leverage the function's argument to serve as the key and

Presented is a function that accepts key, value, and callback as arguments. The function has been designed with the principles of DRY (Don't Repeat Yourself) in mind. Its main purpose is to perform a lookup to an Elasticsearch endpoint using the key/v ...