V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
manyfreebug
V2EX  ›  Vue.js

用 vue 实现的动画,为什么却不按照预期来运行(已经添加了.fade-leave 类,但貌似不生效)

  •  
  •   manyfreebug · 2019-07-24 23:04:41 +08:00 · 2124 次点击
    这是一个创建于 1709 天前的主题,其中的信息可能已经有所发展或是发生改变。
    运行效果也可在这查看: https://jsbin.com/leyeyureki/edit?html,css,js,output
    
      对这段代码的预期是:
        (1)在未触发动画前,.box 的 opacity 的初始值是 0.3 ;
        (2)在点击切换按钮时(使 show 变为 false),离开过渡动画被触发,css 中 opacity 的
           值先变成 1,然后经过 3s 后,opacity 的值变成 0。
    
      问题在于:当点击切换按钮时,貌似.fade-leave 这个类并没有生效。
               我不是已经在 css 中添加了.fade-leave 这个类了吗?
               但为什么点击切换时,它并没有将 opacity 的值首先变成 1.
               .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗?
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
      <div id="app">
        <input type="button" value="切换"  v-on:click="handleClick">
        
        <transition name="fade">
          <div class="box" v-if="show">hello world</div>
        </transition>
      </div>
    
    </body>
    </html>
    
    .box {
      /* .box 的初始值 */
      opacity: 0.3;
    }
    
    /* 
      对这段代码的预期是:
        (1)在未触发动画前,.box 的 opacity 的初始值是 0.3 ;
        (2)在点击切换按钮时(使 show 变为 false),离开过渡动画被触发,css 中 opacity 的
           值先变成 1,然后经过 3s 后,opacity 的值变成 0。
    
      问题在于:当点击切换按钮时,貌似.fade-leave 这个类并没有生效。
               我不是已经在 css 中添加了.fade-leave 这个类了吗?
               但为什么点击切换时,它并没有将 opacity 的值首先变成 1.
               .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗?
    
    */
    
    .fade-leave {
      opacity: 1;
    }
    
    .fade-leave-active {
      transition: opacity 3s;
    }
    
    .fade-leave-to {
      opacity: 0;
    }
    
    var vm = new Vue({
      el: "#app",
      data: {
        show: true
      },
      methods: {
        handleClick: function() {
          this.show = !this.show;
        }
      }
    })
    
    4 条回复    2019-07-25 16:41:46 +08:00
    liyang5945
        1
    liyang5945  
       2019-07-25 08:48:40 +08:00
    v-if 不是这么用的,v-if 的意思是否渲染出来这个元素,一开始 show 是 true,你再把 show 改成 false 也没用的,应该用 v-show,v-show 的作用才是显示隐藏
    Kei
        2
    Kei  
       2019-07-25 09:09:53 +08:00
    > 离开过渡动画被触发,css 中 opacity 的值先变成 1,然后经过 3s 后,opacity 的值变成 0。

    并没有说明 opacity 0.3 -> 1 的动画时间
    mozhizhu
        3
    mozhizhu  
       2019-07-25 09:11:34 +08:00
    请认真看官方示例(哪怕是原封不动的复制下来运行一次);
    例如你的过渡类名设定的“ fade";
    涉及到的自动关联类名.fade-enter-active,.fade-leave-active,.fade-enter,.fade-leave-to;
    显然,你并没有搞明白这一点。
    manyfreebug
        4
    manyfreebug  
    OP
       2019-07-25 16:41:46 +08:00
    @mozhizhu 官方文档中不是说有 6 个 class 的切换吗?其中也包括了.fade-leave 啊
    <a href="https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">在进入 /离开的过渡中,会有 6 个 class 切换</a>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4643 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:49 · PVG 17:49 · LAX 02:49 · JFK 05:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.