vue 如何实现划入一个元素让另一个元素慢慢的显示和隐藏

CSS:

 .knowledgeborder{
        width:100%;
        display: flex;
        justify-content: space-between;
      }
      .class-one{
        border: 1px solid blue;
        width:20%;
        height:300px;
        margin:0 2.5%;
        border-radius: 20px;
      }
      .class-one p{
        font-size: 18px;
        text-align: center;
        line-height: 30px;
      }
      .class-one>div{
        width:90%;
        background-color:yellow;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
        margin: 0 5%;
        padding:10px;
        border-radius: 10px;
        box-sizing: border-box;
        /* display: none; */
      }
      /* .class-one.active>div{
        display: block
      } */
      .class-one>span{
        background-color: blue;
        color: #fff;
        width:90%;
        margin: 10px 5%;
        padding:10px;
        border-radius: 10px;
        box-sizing: border-box;
        display: block;
        opacity: 0;
      }
      .class-one>span.active{
        animation: aaa 5s forwards;
      }
      @keyframes aaa{
        from {opacity: 0; }
        to {opacity: 1; }
      }

HTML:

<div id="app" class="knowledgeborder">
      <div class="class-one" v-for="(item,index) in obj">
        <p>{{item.title}}</p>
        <div @mouseenter="enter(index)" @mouseleave="leave()">{{item.div}}</div>
        <span :class="(seen && index==current) ? 'active' : ''">{{item.span}}</span>
      </div>
    </div>

 

JS:

    <script>
      new Vue({
        el: '#app',
        data: {
          obj:[
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            },
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            },
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            },
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            },
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            },
            {
              title: 'i am title',
              div: 'i am yellow content',
              span: '55555'
            }
          ],
          current: 0,
          seen:false,
        },
        methods:{
          enter(index){
            this.seen = true;
            this.current = index;
          },
          leave(){
            this.seen = false;
            this.current = null;
          }
        }
      })
    </script>

需要的逻辑和必须写的内容我用黑色加重了。