Vuejs 过渡动画休假不工作

Question

我正在使用 Vuejs 沿着 CSS 添加转换的路线。我现在正在构建一个基本的移动导航。到目前为止，这是我的代码：

我的HTML:

    <nav>
        <div id="nav-btn" v-on="click: isVisible = !isVisible">
            NAVIGATION
            <span class="pull-right"><i class="fa fa-bars"></i></span>
        </div>
        <ul v-show="isVisible" v-transition="slide">
            <li><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Explore">Explore</a>
                <ul>
                    <li><a href="#" title="Adventure">Adventure</a></li>
                    <li><a href="#" title="Main Region">Main Region</a></li>
                    <li><a href="#" title="The Exchange">The Exchange</a></li>
                </ul>
            </li>
        </ul>

        <pre>
            {{ $data | json }}
        </pre>
    </nav>

我的转换CSS（其余的可以在fiddle中看到默认样式）：

    .slide-transition {
        transition: all .5s ease-in-out;
        height: auto;
        overflow-y: hidden;
    }
    .slide-enter, .slide-leave {
        transition: all .5s ease-in-out;
        height: 0;
        opacity: 0;
    }

然后我的 Javascript 和我的 Vue 实例：

    var $j = jQuery.noConflict();

    // Navigation instance
    new Vue({

        el: 'nav',

        data: {
            isVisible: false
        },

        methods: {
        }

    });

滑下来还好，但是滑上去，晃的特别快。它做起来并不顺利。当我取消不透明度时，它看起来更糟。休假 CSS 规则似乎不适用，但它们适用于进入。

我宁愿不使用不透明度，因为它看起来更像是褪色。我想要的是让它向下滑动然后向上滑动，没有任何淡入淡出效果。我在这里关注他们的文档：

http://vuejs.org/guide/transitions.html

但我无法完全理解他们在第一个示例中的效果。

感谢您的帮助。

Answer 1

由于浏览器实现问题，很难制作往返 height: auto 的动画。如果您改用“5em”之类的实际高度度量标准，效果会更好。我更新了你的 fiddle:

http://jsfiddle.net/davidkhess/67dcnd7a/2/

Vuejs 过渡动画休假不工作

Vuejs transition animation not working on leave

jquery

vue.js