javascript - 新创建的伪元素上的 CSS Transition

Question

我想在伪元素上创建淡入淡出效果，但遇到困难，因为我无法在该元素上使用 javascript。

我有一个类似于我在这里尝试做的事情的例子，但我无法让元素淡入，因为在创建元素时过渡似乎不起作用。

https://codepen.io/anon/pen/wrxPXJ

.hoverhere.dim::before {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.8);
    opacity: 1;
    transition: opacity 1s;
 }

我正在向 div 添加一个类，以便在与上述 css 匹配后创建伪元素，但是无法确定如何为其设置动画。

如果没有像下面这样的伪元素，我可能可以让它工作:

https://codepen.io/anon/pen/Oxwzvv

但是想知道是否有一种方法可以不更改我的标记以包含一个空的 div。

Answer 1

我猜你是说你想要这个？

$('.hoverhere')
  .mouseenter(function() { $(this).addClass('dim'); })
  .mouseleave(function() { $(this).removeClass('dim'); });

.hoverhere {
  width: 100%;
  height: 40px;
  background: red;
  color: white;
  text-align: center;
}

.hoverhere::before {
  content: '\A';
  position: absolute;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-out;
}

.hoverhere.dim::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-out;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>

它需要的是为 opacity 建立一个起点。

---

如果这只是为了悬停，你根本不需要 JS。

.hoverhere {
  width: 100%;
  height: 40px;
  background: red;
  color: white;
  text-align: center;
}

.hoverhere::before {
  content: '\A';
  position: absolute;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease-out;
}

.hoverhere:hover::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-out;
}

<p>RANDOM TEXT HERE</p>
<div class="hoverhere">HOVER ON ME</div>
<p>MORE RANDOM TEXT HERE</p>