Question

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

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

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

也许是另一个让它更清晰的例子：

＆＃13;

SELECT id WHERE coloumn = "abc" ;

＆＃13;

（来源）：http://blog.teamtreehouse.com/triggering-css-animations-with-sibling-selectors

这个JS可行吗？

Answer 1

此代码的上下文涉及没有任何插件的轮播。问题不是关于滑块，而是我将解释我是如何尝试使以下内容更简单，而不是上面的要求：

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`;
});

滑块是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;

我计算了在滑块的一帧中显示的总div帧并设置了可显示的宽度;
创建滑块宽度，如此处，即最大宽度。
在每次btn点击时，滑块向左移动一定位置。过渡照顾左右平滑的运动。

将过渡和伪css内容放到css。

在事件目标上添加从element1到element2的css代字号

1 个答案: