I am currently working on implementing a transition effect in Vue.js.
I want to create an animation where, upon clicking the search bar, it smoothly moves up to the top of the screen and simultaneously shrinks in size.
App.vue
<template class="template-main-es">
<div id="app" class="container">
<div class="input-group centered" id="efgej243">
<div class="transition">
<form action="" class="search-bar">
<input type="text"
class="form-control col-md-6 shadow-none"
@keyup.prevent= "search"
@focus="transitionX"
v-model="query" placeholder="Search for..." name="q"/>
<button type="submit" class="">X</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
query: ''
}
},
methods: {
search() {
console.log(this.query);
return this.query;
}
}
}
function transitionX() {
var element = document.getElementById("efgej243");
element.classList.toggle("top");
}
</script>
<style>
:root {
--gray: #808080;
--lightgray: #f9f9f9;
--darkgray: #A9A9A9;
--silver: #C0C0C0;
--b: 0.1em;
--c: #C0C0C0;
}
.container {
width: 100%;
min-height: 100vh;
padding: 5%;
background: var(--lightgray);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.transition {
width: 100%;
max-width: 700px;
color: #0000;
padding-block: var(--b);
// Rest of the styles remain the same...