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

The Angular-ui typeahead feature is delivering accurate results when the backspace key is pressed

Errors occur when attempting to install plugins from npm

How is it possible that my array becomes reversed without any intervention on my part?

Modify/Enclose a method within a prototype

Steps for adding a user-glyphicon within an img tag

Discover the way to utilize the java enum toString() function in jQuery

Offspring element overrides styling of its parent

How come my picture is clinging to the bottom of the container?

Breaking a line within a list item will create additional spacing between the lines

Revealing information about a photo when hovering over it

Absence of receiving any HTTP error codes when making REST calls

Is it possible to reference a .js file within an HTML file using AngularJS?

What is the best way to increase the spacing between inline-block elements?

What is the best way to switch out the characters 'a' and 'b' in a given string?

Can config values be dynamically set from an Excel file in Protractor?

Is there a potential bug in Chrome with the submit button appearing "depressed" when focused?

Determine user connectivity in Angular 4 using Firebase

Organizing a drop down list in alphabetical order with Angular.js is not supported

Choosing elements that are visible on the webpage using CSS selectors or XPath

Why does the Leaflet map appear inconsistently?