我的搜索页在点击搜索框进入时没有动画效果，但是返回时有动画效果，如何解决

<template>
  <transition name="search">
    <div class="search">
      <header class="g-header-container">
          <search-header/>
      </header>
      <div class="g-content-container">
        <me-scroll>
          <search-hot></search-hot>
        </me-scroll>
      </div>
    </div>
  </transition>
</template>

<script>
  import MeScroll from 'base/scroll';
  // import MeConfirm from 'base/confirm';
  import SearchHeader from './header';
  import SearchHot from './hot';
  // import SearchHistory from './history';
  // import SearchResult from './result';

  export default {
    name: 'Search',
    components: {
      MeScroll,
      // MeConfirm,
      SearchHeader,
      SearchHot
      // SearchHistory,
      // SearchResult
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";

  .search {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $search-z-index;
    background-color: $bgc-theme;
  }
  .search-enter-active,
  .search-leave-active {    
      transition: all 0.3s;
  }

  .search-enter,
  .search-leave-to {
     transform: translate3d(100%, 0, 0);
  }
</style>

迷失的小麦 2020-04-12

源自：实战：Vue 完成分类、搜索页 2-2 自由编程

收起

3回答

好帮手慕粉 2020-04-13 19:15:00

同学你好，同学是不是对这个动画效果有什么误解呢，这样就算是有动画效果了：

如果没有动画的话，是没有这个过程的，从首页过来页面直接就变成搜索页了：

老师已经测试了好几次同学的代码了哦，是没有问题的呢，还麻烦同学把进入的动画注释掉，因为老师这边只能截图，不能录制动态图片：

祝学习愉快~

收起回答

好帮手慕粉 2020-04-13 13:16:54

同学你好，代码是没有问题的，只不过动画效果不太明显，同学可以将动画时间设置的久一点，这是加了动画以后的：

不加动画点击以后直接就显示搜索页了，同学可以先按照老师第一次回答的将动画效果去掉比较一下就能看出来了。

如果不行，同学可以重启下项目或者清除下缓存试试。

祝学习愉快~

收起回答

提问者迷失的小麦 #1

我的意思是点击home页面的搜索框，进入search页面时是没有效果的，设置为2s时看的很明显了

2020-04-13 13:30:25
提问者迷失的小麦 #2

<style lang="scss" scoped> @import "~assets/scss/mixins"; .search { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: $search-z-index; background-color: $bgc-theme; } .search-enter-active, .search-leave-active { transition: all .3s; } .search-enter, .search-leave-to { transform: translate3d(100%, 0, 0); } .search-enter-to{ transform: translate3d(0, 0, 0); } </style> 修改之后还是不行

2020-04-13 13:33:45