javascript - :hover:before not working properly 上的转换

Question

基本上我想做的是在 :hover:before 元素上应用转换，这样当您将鼠标悬停在 ava.png 上时，:before 元素会平滑出现，而不是立即出现。

我已经尝试将过渡代码添加到 :hover:after 类(如下面的代码所示)，我尝试了我在 StackOverflow 上找到的解决方案之一，将 :hover 更改为 :before 并添加内容 + 过渡到那个类(class)。不用说我的尝试都没有奏效，否则我现在不会在这里。 (:D)

如果有人能花时间帮助我，我将不胜感激，谢谢!

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:hover:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>

Answer 1

要使过渡动画化，您需要对元素属性进行某种更改。这意味着该元素应该是页面的一部分，显示(即无 display: none)和可见(无 visibility: hidden)，但不知何故不可见/透明(opacity: 0 例如)。

在您的情况下，您不会创建 :before 元素，除非您想要显示它。要解决此问题，请使用 scale(0) 渲染 :before，然后将其更改为 scale(1):

#header .inner {
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
  -moz-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  width: 98px;
  height: 92px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050955/ava.png");
}

#slide1:hover {
  position: relative;
}

#slide1:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  z-index: -1;
  position: absolute;
  margin-left: -150px;
  margin-top: -50px;
  -moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
  -webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
  -ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
  transition: transform 1.5s ease, opacity 2s ease;
    -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

#slide1:hover:before {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

#slide2 {
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  z-index: 100;
  width: 140px;
  height: 160px;
  display: inline-block;
  background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}

<div class="inner">
  <a id="slide1" href="/insider-informatie/over-mij.html"></a>
  <div id="slide2"></div>
  <h1>Header 1</h1>
  <p>My text</p>
</div>