Elevate your website's design with Vue and create eye-catching CSS

I've been working on a Vue hamburger menu component, but I'm facing an issue with the animations. The animation process seems to reach the desired end result, yet there is no actual animation displayed.

The animation triggering is done through a change in class.

While I looked into Vue transitions, it appears that they are mainly suited for adding or removing elements, not just changing styles within an element.

Below is the complete code for the component if anyone can provide assistance based on this information.

<template>
  <div id="hamburgerWrapper" @click="changeClass()">
    <div id="hamburger1" :class="classObject"></div>
    <div id="hamburger2"></div>
    <div id="hamburger3" :class="classObject"></div>
  </div>
</template>

<script>
export default {
  name: "hamburger",
  data() {
    return {
      active: false
    };
  },
  computed: {
    classObject: function(){
      return {
        in: this.active,
        out: !this.active
      }
    }
  },
  methods: {
    changeClass(){
      this.active = !this.active
    }
  }
};
</script>

<style lang="scss">

$height: 300px;
$width: $height;

#hamburgerWrapper{
  margin-top: 30px;
  margin-left: 30px;
  width: $width;
  height: $height;
  background-color: rgb(192, 192, 192);
  position: relative;
  cursor: pointer;

  #hamburger1,#hamburger2,#hamburger3{
    position: absolute;
    height: $height * 0.2;
    width: $width;
    background-color: blue;
    border-radius: $height * 0.1;
  }

  #hamburger1{
    top: 0;
    //transform: translateY(($height/2)-($height * 0.1));
    &.in{
      animation: topIn 1s ease forwards;
    }
    &.out{
      animation: topIn 1s ease reverse forwards;
    }
  }

  #hamburger2{
    top: 50%;
    transform: translateY(-50%);
  }

  #hamburger3{
    bottom: 0;
    &.in{
      animation: botIn 1s ease forwards;
    }
    &.out{
      animation: botIn 1s ease reverse forwards;
    }
  }
}

@keyframes topIn {
  0%   {transform: translateY(0) rotate(0deg)}
  50%  {transform: translateY(($height/2)-($height * 0.1)) rotate(0deg)}
  100% {transform: translateY(($height/2)-($height * 0.1)) rotate(45deg)}
}

@keyframes botIn {
  0%   {transform: translateY(0) rotate(0deg)}
  50%  {transform: translateY(-(($height/2)-($height * 0.1))) rotate(0deg)}
  100% {transform: translateY(-(($height/2)-($height * 0.1))) rotate(-45deg)}
}
</style>

Answer №1

After modifying the "out"-animation, I decided to create a unique animation rather than using the reversed "in"-animation. Surprisingly, it ended up working smoothly.

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

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function? obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', &apo ...

Utilizing Node.js callback for validating JWT tokens

In my Node.js server, I have set up an authentication route to authenticate requests: app.get('/loggedin', auth, function(req, res){ console.log(req.authenticated); res.send(req.authenticated ? req.authenticated: false) }) From what I u ...

Unleashing the Power of Aurelia's HTML Attribute Binding

I need to bind the "required" html attribute in my template and model. Along with passing other information like the label value using label.bind="fieldLabel", I also want to pass whether the element is required or not. However, simply using required="tr ...

What is the method to verify if a variable in ES6 is constant?

I'm seeking advice on how to accomplish a specific task. I attempted using the try-catch method, but encountered some limitations: "use strict"; const a = 20; var isConst = false; try { var temp = a; a = a+1; a = temp; } catch (e) { isConst = ...

What is the best way to transfer an image between Angular components and then showcase it?

I've developed a feature using an observable and I'm attempting to transfer a dataURL from one component to another in order to display it as an image. Here is the HTML code for the component where I want to send data from: <canvas id="p ...

Unleashing the hidden power of a website's jQuery function - the ultimate guide!

I am looking to modify the delayedAutoNext function found on the homepage of pitchfork.com which rotates the pitchfork.tv images. My goal is to adjust the setTimeout value to a new number. Is there a way to accomplish this using a bookmarklet or userscrip ...

What is the best way to keep the heights of two divs in sync?

Is there a way to make two divs have the same height, even though their content determines their individual heights? I am looking for a solution that doesn't involve using a table or a parent div. I'm new to JavaScript, so I'm hoping there i ...

Contrasting the Next 12 client-side routing with the Next 13 server-centric routing

According to the Next 13 documentation, it explains how the new router in the app directory utilizes server-centric routing to align with Server Components and data fetching on the server. Unlike the traditional pages directory that employs client-side r ...

What is the process for decoding HTML content that is wrapped within JSON data?

I have a web application built using asp.net that utilizes ajax calls. Below is the code snippet for my web method which successfully responds to the ajax call. ADController adc = new ADController(); DataTable dt = adc.GetGeneral(Convert.ToInt32(A ...

Combining two variables in AngularJS seamlessly, without explicit instruction

In the realm of Controllers resides my beloved home.js: angular.module("HomeApp", ["BaseApp"]) .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) { var self = this; self.posts = BaseServ ...

Transforming all commas to plus signs in a JavaScript codebase for the entirety of

Currently, I am using winston for logging and have created a common method to log throughout the project. However, I am facing an issue with many logging statements that look like this: logger.info("here is the data" , data) The problem arises when trying ...

Tips for displaying a category name only once if it has already been rendered in a map function

My scenario involves a variety of categories in which pharmaceutical drugs are classified. Each individual drug belongs to a specific class. Currently, my code iterates through all the categories from the category array and places drugs underneath them if ...

Tips for fetching data from a database using AJAX when the values of two drop-down lists are involved

I have successfully implemented an Example where I retrieve data using a single drop-down list from a database. Now, I want to extend this functionality to work with two drop-down lists, where the values retrieved from the database are dependent on the sel ...

Enable the ability to input a value of -1 by clicking on a button or link, but only allow it once (the first click) without needing to disable the button or

I am working with the following script: <script language=javascript> function process(v){ var value = parseInt(document.getElementById('v').value); value += v; document.getElementById('v').value = valu ...

How to apply a series of spaces using span/tspan with jquery/javascript

Check out this fiddle: http://jsfiddle.net/jzLu4toe/3/ <span id='tghj'></span> $('#tghj').text('Hey There'); I'm facing an issue where I need to insert multiple spaces inside a span element. ...

Utilizing Vue.js to incorporate the isActive property to the class name within a v-for loop, along with implementing dynamic class names

I am currently using a loop to iterate through some data in my store.js file, and everything is functioning as expected. However, I would like to add a condition to check if the Vue instance is active before applying a specific class to the polygon element ...

Display information from dynamically generated pages using Gatsby JS sourcing data from CSV files

I've been working on creating pages in Gatsby JS from a csv file and everything seemed to be going smoothly. However, when it comes to displaying the data on these generated pages, I keep running into issues with undefined variables and can't see ...

"React Antd Element Type Validation Failure: received an unexpected object instead of the required element type. Issue

I recently upgraded from antd version 3.7.0 to the latest version 3.23.4 and now I'm encountering a strange error: Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite co ...

The Google Apps Script will activate only on weekdays between the hours of 10 AM and 5 PM, running every hour

function Purchase() { var ss=SpreadsheetApp.getActive(); var sheet=ss.getSheetByName("Buy"); var Cvalues=sheet.getRange(2,3,sheet.getLastRow()-1,1).getValues(); var Avalues=sheet.getRange(2,1,sheet.getLastRow()-1,1).getValues(); var r ...

The Vuetifyjs 2.0 theme remains unchanged despite using watchers

When working with Vuetifyjs v1.5, I was able to easily change the theme dynamically using Vue watchers. However, this functionality seems to have changed with the update to Vuetifyjs 2.0. Current Versions: Vue - 2.6.10 Vuetify - 2.0 Vuex - 3.1.1 export ...