javascript - 在事件目标上添加 css tilde 从 element1 到 element2

Question

基本上，如何使用 JS 动态执行以下操作:

element1:target ~ element2 {//做某事}

element1.addEventListener(":target", () => {
   //something here? 
});

或者也许是另一个更清楚的例子:

.go:checked ~ .road {
  -webkit-animation: move-road 6s 1  1.3s ease-in-out forwards,
                     rotate-road 1s forwards;
}

(来源):http://blog.teamtreehouse.com/triggering-css-animations-with-sibling-selectors

这个JS可行吗？

Answer 1

这段代码的上下文与没有任何插件的轮播有关。问题与 slider 无关，但我只是要解释我是如何根据上述要求尝试通过以下方式使其更简单:

e.addEventListener('click', function(evt) {
  // e is individual buttons on the slider div 
  let that = this;
  // id = evt.target.hash;
  id = that.href;
  // console.log(id);
  num = parseInt(id[id.length - 1]) * -800;
  slider.style.left = `${num}px`;
});

slider 是 css 端的以下类，它很重要:

.div-img-holder
    width: 2400px;
    height: 400px;
    clear: both;
    position: relative;

    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s;

1. 我计算了要在 slider 的一帧中显示的总 div 帧并设置了可呈现的宽度；
2. 在这里创建了一个 slider 宽度，即最大宽度。
3. 每次单击 btn 时， slider 都会向左移动一个特定位置。过渡负责平滑的左移。

将 transition 和 pseudo-css 的东西放到 css 中。