Question

我想在一个父v-if状态更改中设置多个转换（在单独的子元素上）。

例如，当我显示模态时，我希望背景模糊为fadeIn（使用不透明度），模式内容为slideIn（使用过渡或动画）。我目前的情况如下，当我使用转换时，背景模糊元素（.modal）正在与内容（.modal__content）一起转换：

<transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
  <div class="modal" v-if="isVisible">
    <div class="modal__content">
      </slot><slot/>
    </div>
  </div>
</transition>

Answer 1

您可以在<?= $form->field($model, 'photo_name')->widget(FileInput::classname(), [ 'options'=>[ 'id'=>'upload-img', 'multiple'=>false, 'accept'=>'image/*', ], 'pluginOptions'=>[ 'allowedFileExtensions'=>['jpg', 'gif', 'png', 'bmp'], 'browseLabel'=>'browse', 'captionLabel'=> '', 'removeLabel'=>'remove', 'browseClass' => 'btn btn-success', 'uploadClass' => 'btn btn-info', 'removeClass' => 'btn btn-danger', 'showPreview' => true, 'showCaption' => false, 'showRemove' => true, 'showUpload' => false, 'overwriteInitial'=>false, 'dropZoneEnabled'=>false, 'showClose' => false, 'browseIcon' => '<i class="glyphicon glyphicon-camera"></i> ', 'maxFileSize'=>1024 ], ]); ?>淡出后使用JS hook来触发幻灯片动画：

.modal

使用一个<transition>包装器转换多个子元素

1 个答案: