背景颜色过渡和 before/after 不透明度过渡同步问题

Question

我目前遇到使用前后伪元素淡入导航项的问题。

当我悬停导航项时，它必须将其背景颜色从白色更改为蓝色。没什么疯狂的。但它也必须显示两个背景图像，分别通过将 ::before 伪元素从 0 更改为 1 和 ::after 伪元素也从 0 更改为 1。

问题是虽然我设置了相同的过渡持续时间，但元素的淡入淡出行为与自身的背景颜色过渡相比有点不同。

您还可以通过悬停 (jsfiddle) "play" 快速将鼠标移入移出以更清楚地查看问题。

谁能帮我解开这个谜团，不胜感激:)

这是我的 jsfiddle：https://jsfiddle.net/5qnw8ke4/

这里是转换问题的截图：screen capture

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    background-color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

a::before, a::after {
    opacity: 0;
    height: 100%;
    position: absolute;
    top: 0;
    content: "";
    -webkit-transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
    transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
}

a::before {
    width: 12px;
    left: -12px;
    background: url("https://svgshare.com/i/J61.svg") no-repeat 0;
    background-size: auto 100%;
}

a::after {
    width: 12px;
    right: -12px;
    background: url("https://svgshare.com/i/J4j.svg") no-repeat 100%;
    background-size: auto 100%;
}

a:hover {
    background-color: #259cff;
    color: #fff;
}

a:hover::before, a:hover::after {
    opacity: 1;
    width: 17px;
}

a:hover::before {
    left: -17px;
}

a:hover::after {
    right: -17px;
}

<a href="#">My link</a>

Answer 1

您可以像下面这样简化效果，而不需要 SVG 并依赖整个形状的一个伪元素：

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition:0.2s;
}

a::before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0; 
   opacity:0;
   padding:0 15px;
   background:
    linear-gradient(#259cff,#259cff) content-box,
    linear-gradient(to top    right,transparent 47%,#259cff 50%) left /15px 100%,
    linear-gradient(to bottom right,transparent 47%,#d4ecff 50%) left /15px 100%,
    linear-gradient(to bottom left ,transparent 47%,#259cff 50%) right/15px 100%,
    linear-gradient(to top    left ,transparent 47%,#d4ecff 50%) right/15px 100%;
   background-repeat:no-repeat;
   transition:inherit;
}
a:hover::before {
  left:-17px;
  right:-17px;
  opacity:1;
}
a:hover {
  color:#fff;
}

<a href="#">My link</a>

另一个偏斜变换的想法：

a {
  display: block;
  width: 61px;
  height: 67px;
  margin: 50px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  line-height: 67px;
  color: #259cff;
  position: relative;
  transition: 0.2s;
}

a::before,
a::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: #d4ecff;
  transform: skewX(-12deg);
  transition: inherit;
}

a::after {
  background: #259cff;
  transform: skewX(12deg);
}

a:hover::before,
a:hover::after {
  left: -17px;
  right: -17px;
  opacity: 1;
}

a:hover {
  color: #fff;
}

<a href="#">My link</a>

背景颜色过渡和 before/after 不透明度过渡同步问题

Background-color transition & before/after opacity transition sync issue

css

background-image

background-color

pseudo-element

css-transitions