Question

我有一个带有两个元素的容器，我想通过点击来切换。

我希望在新元素滑入时滑动可见元素，但转换仅影响第一个孩子（即徽标），而第二个孩子（即版本）执行简单的显示/隐藏。改变孩子的顺序并没有帮助。

component.vue中的标记

browser_adapter.js:84 TypeError: $(...).datepicker is not a function
    at NKDatetime.init (http://localhost:3000/main.bundle.js:27185:59)
    at NKDatetime.ngAfterViewInit (http://localhost:3000/main.bundle.js:27115:15)
    at DebugAppView._View_Crud0.detectChangesInternal (Crud.template.js:1428:62)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20)
    at DebugAppView._View_Crud_Host0.detectChangesInternal (Crud.template.js:40:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20)
    at DebugAppView._View_ServicesMain0.detectChangesInternal (ServicesMain.template.js:376:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20)
    at DebugAppView._View_ServicesMain_Host0.detectChangesInternal (ServicesMain.template.js:37:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/vendor.bundle.js:60647:20)
    at DebugAppView._View_App0.detectChangesInternal (App.template.js:88:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/vendor.bundle.js:60655:20)
    at DebugAppView._View_App_Host0.detectChangesInternal (App.template.js:40:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:60629:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:60734:45)
    at ViewRef_.detectChanges (http://localhost:3000/vendor.bundle.js:47800:66)
    at http://localhost:3000/vendor.bundle.js:34125:85

component.vue中的逻辑

<div class="brand-container" @click="toggleLogoBox">
  <div class="logo" v-show="logoVisible" transition="slide">
    <img src="../assets/images/logo.svg">
  </div>
  <div class="version" v-show="versionVisible" transition="slide">
    <div class="label">Motor Club</div>
    <div class="number">{{ version }}</div>
  </div>
</div> <!-- brand-container -->

过渡

methods: {
  toggleLogoBox: function () {
    this.logoVisible = !this.logoVisible;
    this.versionVisible = !this.versionVisible;
  },
  // ...

Answer 1

事实证明，这不是转换问题，而是没有position: absolute; top: 0; left: 0;属性的子元素，因此可以从头到尾看到每个元素的转换。

Vue过渡不会影响每个元素

1 个答案: