I'm trying to make a transition in Vue.
Upon a click on the search bar, that it moves up to the top of the screen and gets smaller in its overall size.

App.vue

<template >
  <div id="app" >
    <div  id="efgej243">
      <div >
        <form action="" >
          <input type="text" 
           
          @keyup.prevent= "search"
          @focus="transitionX"
          v-model="query" placeholder="Zoeken naar..." name="q"/>
          <button type="submit" >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);
    background: 
      linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
      linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
    -webkit-background-clip: text,padding-box;
            background-clip: text,padding-box;
    transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
  }
  .transition:hover {
    --_p: 100%;
    --_s: .3s;
  }

  .search-bar {
    width: 100%;
    max-width: 700px;
    background-color: rgba(255, 255, 255, 0.2) !important;
    display: flex;
    align-items: center;
    border-radius: 60px;
    padding: 10px 20px;
    /* backdrop-filter: blur(4px) saturate(180%); */
  }
  .search-bar input {
    background: transparent;
    flex: 1;
    border: 0;
    outline: none;
    padding: 24px 20px;
    font-size: 20px;
    color: var(--darkgray);
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
  }
  .search-bar input:focus{
    background: transparent !important;
    flex: 1;
    border: 0;
    outline: none;
    padding: 24px 20px;
    font-size: 20px;
    color: var(--darkgray);
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: groove;
  }
  ::placeholder {
    color: #cac7ff;
  }
  .search-bar button {
    border: 0;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: var(--gray);
    cursor: pointer;
  }
  /* .search-bar button, .picto {
    width: 25px;
  } */
  
  .centered {
    display: grid;
    place-content: center;
  }


  /* transition move */

  /* .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    transition: top, scale;
  }

  .top {
    top: 0;
    transform: scale();
  } */
</style>

CodePudding user response：

Your transitionX function needs to be defined inside of the methods block, the same way you've defined the search function.