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元素，除非你想显示它。为了解决这个问题，渲染 :before与 scale(0) ，然后将其更改为 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>