onclick 动作比 css 慢：焦点选择器开关

Question

我在我的应用程序中使用 vue.js、vue-router 和 vue-material。我有一个搜索栏，您可以在其中对艺术家、发行和唱片进行全局搜索。这看起来有点像这样：

结果div当前仅在输入表单有焦点时显示。我在 css:

中这样做

.search-field + span {
  display: none;
}

.search-field:focus + span, .search-field:active + span {
  display: block;
}

这个 shows/hides 结果跨度在所有其他组件之前的绝对位置。

我现在遇到的问题是，当我单击其中一个结果条目时，它什么也没做。

显示的结果项是 md-list-item 类型，并为 vue-router 定义一个 :to 属性来执行站点导航点击。

我假设它什么都不做，因为 'click'（操作）实际上从未在列表项本身上执行，而是在它后面的组件（正文）上执行。我认为发生这种情况是因为 :focus 选择器在项目上触发 onclick 事件之前更改了视图状态（隐藏结果范围）。

有没有办法延迟从 :focus 到正常的切换？我试图将 css 属性 transition-delay 放在 .search-field class 上，但这并没有让我走多远。

编辑 1

我找到 a similar issue 但无法将解决方案移植到我的标记中；它看起来像这样：

  <md-field class="md-toolbar-section-end searchbar md-inline grow">
    <label class="search-label">Search...</label>
    <md-input class="search-field" v-model="query"></md-input>
    <span class="result-span">
    <md-content class="results md-elevation-15 md-scrollbar md-layout" :style="{ display: displayResults ? 'flex' : 'none' }">
      <template v-for="loader in [loaderArtists, loaderReleases, loaderRecords]">
        <div :key="Math.random()">
          <md-list>
            <template v-if="loader.isLoading">
              <span>
                <md-progress-spinner :md-diameter="20" :md-stroke="3" md-mode="indeterminate"></md-progress-spinner>
              </span>
            </template>
            <template v-else>
              <template v-for="item in loader.dataSource.data">
                <md-list-item :to="item.value">
                  <md-icon>{{item.icon}}</md-icon>
                  <span class="md-list-item-text">{{item.label}}</span>
                </md-list-item>
              </template>
            </template>
          </md-list>
          <md-divider class="divider"></md-divider>
        </div>
      </template>
    </md-content>
    </span>
    <md-icon class="search-icon">search</md-icon>
  </md-field>

我相应地更改了 css 以使用属性 visibility 而不是 display 并将 transition: visibility 0.2s 添加到 .result-span class - 没用。

Answer 1

我通过应用 this answer 中提供的解决方案设法解决了问题。

一开始不行的原因是，.2s还是太快了，我不得不改成0.3s

总结：

我把css改成这样：

.result-span {
  transition: visibility .3s;
}

.search-field ~ .result-span {
  visibility: hidden;
}

.search-field:focus ~ .result-span, .search-field:active ~ .result-span {
  visibility: visible;
}

onclick 动作比 css 慢：焦点选择器开关

onclick action slower than css :focus selector switch

javascript

css

vue.js

vue-router

vue-material