Question

我基本上试图复制CSS Tricks导航栏的行为，当整个栏的任何部分悬停在上方时，项目标签的动画从左侧飞入。我正在尝试使用Web Components和Polymer。

我的HTML结构（大致）是这样的：

的index.html

<!-- ... head stuff ... -->
<body>
  <my-app></my-app>
</body>

我-app.html

<dom-module id="my-app">
  <nav>
    <my-nav-item url="/"
                 text="Home"
                 icon="home.svg#nav-icon-home"></my-nav-item>
  </nav>
</dom-module>

我-NAV-item.html

<dom-module id="my-nav-item">
  <a href$="[[url]]">
    <svg height="20px" width="20px" viewBox="0 0 20 20">
      <use href$="[[icon]]"></use>
    </svg>
    <span>[[text]]</span>
  </a>
</dom-module>

CSS看起来像这样：

我-app.html

nav {
  width: 75px;
  height: calc(100% - 60px);
  background: #222d32;
}

我-NAV-item.html

a {
  display: block;
  text-decoration: none;
  color: white;
  margin: 25px auto;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px;
}

svg {
  fill: white;
  margin: 0 auto;
}

span {
  display: block;
  margin: 10px auto;
  transform: translateX(-200px);
  transition: 0.1s;
}

span按预期在屏幕外开始，当我a:hover span与transform: translateX(0)一起使用时，它与从左边飞来的文字完美配合。但是，当nav的任何部分悬停在上面时，我会像所有标签一样从左侧飞入，就像CSS Tricks'网站一样。

如何在不打破关注点分离的情况下设置nav:hover my-nav-item span transform属性？

Answer 1

我最终用::shadow /deep/：

解决问题（不情愿）

我-app.html

nav:hover worf-nav-item::shadow /deep/ span { transform: translateX(0); }

可能可能是什么样的东西就像在2015年Polymer Summit 2015的演讲中提到的作为mixins的原始CSS属性一样："Polymer's Styling System."

我可能会提出这样的建议：

我-app.html

nav:hover { --transform-no-translate-x: { transform: translateX(0); } }

我-NAV-item.html

span { @apply(--transform-no-translate-x); }

但等等......还有更多！

我实际上在写这篇文章的时候一直在玩它并提出了另一个解决方案。我更喜欢这个。

我-app.html

nav { --nav-transform: translateX(-200px); } nav:hover { --nav-transform: translateX(0); }

我-NAV-item.html

span { transform: var(--nav-transform); }

如何从具有阴影DOM的父项中应用伪选择器样式？

1 个答案:

但等等......还有更多！