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（其余部分可以在默认样式的小提琴中看到）：

.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”），则效果会更好。我更新了你的小提琴：

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

Vuejs过渡动画不休假

1 个答案: