Question

加载页面时，我尝试在div上添加过渡效果。但是有一些问题使其无法解决。

模板

<header>
    <transition name="slideLeft">
        <div v-show="loaded" class="contents content-left"></div>
    </transition>
    <transition name="slideRight">
        <div v-show="loaded" class="contents content-right"></div>
    </transition>
</header>

脚本

data(){
    return {
        loaded: false,
    };
},
created(){
    this.onLoaded();
},
methods: {
    onLoaded() {
      this.loaded = true;
    }
}

css

.slideLeft-enter-active{
    width: 400px;
}
.slideRight-enter-active{
    width: 400px;
}
header {
    background-color: #1b1d1f;
    height: 100vh;
    display: flex;
    justify-content: center;
}
header .contents {
    transition: 2s;
    width: 0;
    background-color: #151618;
}

有人可以指出这里有什么问题吗？

Answer 1

更改样式代码

<style>
  .slide-left-enter,
  .slide-right-enter {
    width: 0 !important;
  }

  .slide-left-enter-to,
  .slide-right-enter-to {
    width: 400px !important;
  }

  header {
    background-color: #1b1d1f;
    height: 100vh;
    display: flex;
    justify-content: center;
  }

  header .contents {
    width: 400px;
    transition: all 2s;
    background-color: #151618;
    color: #fff;
  }
</style>

页面加载后过渡开始

1 个答案: