推拉动画的登录注册页面
<template>
<div class="body">
<div class="form-wrapper">
<transition name="form-wrapper">
<div class="formbox" v-if="show" key="login">
<div class="header">登录</div>
<div class="input-wrapper">
<div class="border-wrapper">
<input
type="text"
name="username"
placeholder="帐号"
class="border-item"
/>
</div>
<div class="border-wrapper">
<input
type="password"
name="password"
placeholder="密码"
class="border-item"
/>
</div>
</div>
<div class="action">
<div class="btn" @click="$router.push('/classify')">登录</div>
<div class="btn" @click="change">注册</div>
</div>
</div>
<div class="formbox" v-else key="register">
<div class="header">注册</div>
<div class="input-wrapper">
<div class="border-wrapper">
<input
type="text"
name="username"
placeholder="帐号"
class="border-item"
/>
</div>
<div class="border-wrapper">
<input
type="password"
name="password"
placeholder="密码"
class="border-item"
/>
</div>
<div class="border-wrapper">
<input
type="password"
name="password"
placeholder="确认密码"
class="border-item"
/>
</div>
</div>
<div class="action">
<div class="btn" @click="change">注册</div>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
methods: {
change() {
this.show = !this.show;
},
},
};
</script>
<style scoped>
* {
padding: 0;
margin: 0;
}
.body {
height: 100vh;
font-family: "JetBrains Mono Medium";
align-items: center;
justify-content: center;
/* background-color: #0e92b3; */
background: url("~@/assets/imgs/anxinbg.jpg") no-repeat;
background-size: 100%;
}
.form-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 400px;
background-color: rgb(41, 45, 62);
color: #fff;
border-radius: 10px;
padding: 50px;
}
.formbox {
position: absolute;
top: 0;
width: 300px;
height: 300px;
/* float: left; */
}
.form-wrapper .header {
text-align: center;
font-size: 35px;
text-transform: uppercase;
line-height: 100px;
}
.form-wrapper .input-wrapper input {
background-color: rgb(41, 45, 62);
border: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
outline: none;
}
.form-wrapper .input-wrapper input::placeholder {
text-transform: uppercase;
color: #ffffff;
}
.form-wrapper .input-wrapper .border-wrapper {
background-image: linear-gradient(to right, #e8198b, #0eb4dd);
width: 100%;
height: 50px;
margin-bottom: 20px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.form-wrapper .input-wrapper .border-wrapper .border-item {
height: calc(100% - 4px);
width: calc(100% - 4px);
border-radius: 30px;
}
.form-wrapper .action {
display: flex;
justify-content: center;
}
.form-wrapper .action .btn {
margin: 0 20px;
width: 40%;
text-transform: uppercase;
border: 2px solid #0e92b3;
text-align: center;
line-height: 50px;
border-radius: 30px;
cursor: pointer;
transition: 0.2s;
}
.form-wrapper .action .btn:hover {
background-color: #0e92b3;
}
.form-wrapper .icon-wrapper {
text-align: center;
width: 60%;
margin: 0 auto;
margin-top: 20px;
border-top: 1px dashed rgb(146, 146, 146);
padding: 20px;
}
.form-wrapper-enter-active,
.form-wrapper-leave-active {
transition: all 4s;
}
.form-wrapper-enter {
opacity: 0;
transform: translateX(-60%) scaleX(.1);
}
.form-wrapper-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(60%) scaleX(.1);
}
</style>
样式是参考的
https://www.bilibili.com/video/BV1Sz411b7CR?from=search&seid=4111405311831770913
如果把动画过度的中的平移删掉。可以做成十字翻页效果
.form-wrapper-enter {
opacity: 0;
transform: scaleX(.1);
}
.form-wrapper-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scaleX(.1);
}