Question

我需要在v-show上使用fadeIn效果。点击火上项目Cadastro时我可以点火功能，但是当v-show点火时我无法控制行为。

HTML

<div class="container-fluid" id="app">
        <div class="row-fluid">
            <div class="top-menu col-md-12">
                <div class="col-md-3 item-menu">
                    <a @click="showCadastro()">Cadastro</a>
                </div>
                <div class="col-md-3 item-menu">
                    <a>Imprimir</a>
                </div>
            </div>
            <div class="row" v-show="subMenuCadastro">
                <div class="col-md-3 sub-menu">
                  <div class="row-fluid">
                    <a>Produto</a>
                  <div class="row-fluid">
                    <a>Cliente</a>
                  </div>
                  <div class="row-fluid">
                    <a>Técnico</a>
                  </div>
                </div>
            </div>
        </div>
    </div>

JS

var App = new Vue({
  el: '#app',
  data: {
    subMenuCadastro: false
  }
})

App.showCadastro = function() {
  this.subMenuCadastro = !this.subMenuCadastro;
}

Answer 1

您可以使用转场：https://vuejs.org/guide/transitions.html

在您拥有transition的元素上设置v-for属性将创建一些类供您在CSS上使用：

<div class="row" v-show="subMenuCadastro" transition="fadeIn">
  ...
</div>

然后，您可以在元素上使用以下类：fadeIn-transition，fadeIn-enter，fadeIn-leave。请查看文档以获取更多信息。

以下是一个有效的例子：https://jsfiddle.net/q3c81c5q/

如何在v-show上使用fadeIn或类似功能

1 个答案: