【问题标题】:Can't get Vue.js CSS transition to work?无法让 Vue.js CSS 过渡工作?
【发布时间】:2016-11-21 02:41:01
【问题描述】:

CSS 过渡的文档可以在here 找到。

很确定我设置了我的 JSFiddle,它需要如何设置才能使转换正常工作。不完全确定,因为 imo 文档对 CSS 转换有一点了解。

有一些非常基本的 HTML/CSS 我希望能让 Vue.js 创建一个漂亮的淡入淡出效果:

CSS:

.fade-transition {
  opacity: 1;
  transition: all .45s linear;
}

.fade-enter, .fade-leave {
  opacity: 0;
}

HTML:

<div class="loading-overlay" v-if="loading" v-transition="fade">
  In 5 seconds, this overlay should fade out...
</div>  

但是,它似乎不起作用。有什么建议吗?

JSFiddle

【问题讨论】:

    标签: javascript html css css-transitions vue.js


    【解决方案1】:

    将 v-transition 更改为 transition

    <div class="loading-overlay" v-if="loading" transition="fade">
      In 5 seconds, this overlay should fade out...
    </div>
    

    【讨论】:

      【解决方案2】:

      对于div 标记中的transition 属性,只需从transition 之前删除v- 即可。

      <div class="loading-overlay" v-if="loading" transition="fade">
        In 5 seconds, this overlay should fade out...
      </div>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-11-29
        • 2016-07-23
        • 2021-04-05
        • 2020-05-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多