Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Question

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the issue, so here are some images:

Webpage design

https://i.stack.imgur.com/hAMu9.png

https://i.stack.imgur.com/dNCsx.png

[![enter image description here][4]][4]

Here is the code for the component:

<template>
  <main class="login-body">
    <transition name="flip">
      <div class="login-box" v-if="currentForm === 'login'">
        ...
      </div></transition
    >
    <transition name="flip-reverse">
      <div class="login-box" v-if="currentForm === 'register'">
        ...
      </div></transition
    >
  </main>
</template>

<script>
import { Auth } from "aws-amplify";
export default {
  name: "HomeView",
  data() {
    return {
      currentForm: "login",
      email: "",
      password: "",
      confirmPassword: "",
    };
  },
  methods: {
    // Toggle and sign-in/sign-up functions
  },
};
</script>

<style>
/* CSS styles */
</style>

Any assistance on resolving this transition issue would be greatly appreciated 😊

javascript html css vue-component vuejs3

Answer 1

Answer №1

To successfully implement the desired effect, follow these steps:

Start by placing both elements in the transition, give them key attributes, and use mode="out-in"

<transition name="flip" mode="out-in">
    <div key="login" v-if="currentForm === 'login'">...</div>
    <div key="register" v-else>...</div>
</transition>

The next step is to address conflicts in animations by adjusting the transforms as shown below:

.flip-enter-active, .flip-leave-active {
  transition: all .5s;
}
.flip-enter, .flip-leave-to {
  transform: translate(-50%, -50%) rotateY(-90deg);
}

To see a simplified demo of your form, you can use the following template:

<template>
<main class="login-body">
  
  <transition name="flip" mode="out-in">
    
    <div key="login" class="login-box" v-if="currentForm === 'login'">
      <h2>Login</h2>
      <p>Not Registered? <button @click="toggleForm">Register</button></p>
    </div>
    
    <div key="register" class="login-box" v-else>
      <h2>Register</h2>
      <p>Already Registered? <button @click="toggleForm">Log In</button></p>
    </div>
    
  </transition>

</main>

</template>

<script>
  export default {
    name: "HomeView",
    data() {
      return {
        currentForm: "login",
      };
    },
    methods: {
      toggleForm() {
        this.currentForm = this.currentForm === "login" ? "register" : "login";
      },
    },
  };
</script>

<style>

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: #ccc;
    box-sizing: border-box;
  }

  .flip-enter-active, .flip-leave-active {
    transition: all .5s;
  }
  .flip-enter, .flip-leave-to {
    transform: translate(-50%, -50%) rotateY(-90deg);
  }

</style>

Answer 2

To successfully implement the desired effect, follow these steps:

Start by placing both elements in the transition, give them key attributes, and use mode="out-in"

<transition name="flip" mode="out-in">
    <div key="login" v-if="currentForm === 'login'">...</div>
    <div key="register" v-else>...</div>
</transition>

The next step is to address conflicts in animations by adjusting the transforms as shown below:

.flip-enter-active, .flip-leave-active {
  transition: all .5s;
}
.flip-enter, .flip-leave-to {
  transform: translate(-50%, -50%) rotateY(-90deg);
}

To see a simplified demo of your form, you can use the following template:

<template>
<main class="login-body">
  
  <transition name="flip" mode="out-in">
    
    <div key="login" class="login-box" v-if="currentForm === 'login'">
      <h2>Login</h2>
      <p>Not Registered? <button @click="toggleForm">Register</button></p>
    </div>
    
    <div key="register" class="login-box" v-else>
      <h2>Register</h2>
      <p>Already Registered? <button @click="toggleForm">Log In</button></p>
    </div>
    
  </transition>

</main>

</template>

<script>
  export default {
    name: "HomeView",
    data() {
      return {
        currentForm: "login",
      };
    },
    methods: {
      toggleForm() {
        this.currentForm = this.currentForm === "login" ? "register" : "login";
      },
    },
  };
</script>

<style>

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: #ccc;
    box-sizing: border-box;
  }

  .flip-enter-active, .flip-leave-active {
    transition: all .5s;
  }
  .flip-enter, .flip-leave-to {
    transform: translate(-50%, -50%) rotateY(-90deg);
  }

</style>

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Answer №1

Similar questions

Interactive preview of PDFs with pdf.js adaptation

Ways to eliminate gaps between div elements with CSS

Please proceed with submitting your choices in the order that you have selected

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

Is there a way to emphasize a particular day on the calendar obtained from the URL?

How can I troubleshoot jQuery not functioning in iOS even though it works on Safari?

Warning: Unhandled Promise Rejection - Alert: Unhandled Promise Rejection Detected - Attention: Deprecation Notice

Trouble with hide/show loop in setTimeout function

CSS vertical text not functional as expected

Accessing PHP output within Jquery

Tips for storing arrays in AngularJS with JavaScript

Unable to download file from Express using res.download in Angular

Conceal an element if the angular attribute does not contain any value

Where is the function returned by redux-thunk invoked?

Bootstrap does not show submenus on its navigation menus

How can NodeJS Websocket (ws) facilitate communication between various clients?

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

Is it possible for the 'error' attribute to be deemed invalid or inappropriate within ajax?

What is the process for including a new item in the p-breadcrumb list?

Incorporate text inside the border of a Material UI chip