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

【问题标题】：onclick action slower than css :focus selector switchonclick 动作比 css 慢：焦点选择器开关
【发布时间】：2018-08-27 04:57:18
【问题描述】：

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

当前仅当输入表单具有焦点时才会显示结果 div。我在css中这样做：

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

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

这会在所有其他组件之前的绝对位置显示/隐藏结果范围。

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

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

我认为它什么都不做，因为“点击”（动作）实际上从未在列表项本身上执行，而是在它后面的组件（主体）上执行。我认为这是因为 :focus 选择器在项目上触发 onclick 事件之前更改了视图状态（隐藏了结果范围）。

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

编辑 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 类 - 这不起作用。

【问题讨论】：

标签： javascript css vue.js vue-router vue-material

【解决方案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;
}

【讨论】：