Question

此脚本使用相交观察器查找具有“ .anim-target”类的任何内容，然后查看其是否还包含另一个告诉其添加哪个类的类（“ anim-target-NAME”）。然后，一旦看不见它，便将其删除，以便可以重新进行动画处理。是否有一种更简洁的方式编写它而不依赖于单个IF语句？

document.addEventListener("DOMContentLoaded", function(event) { 
    observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if (entry.target.classList.contains('anim-target-fadeIn')) {
                    entry.target.classList.add('animated', 'fadeIn');
                }
                if (entry.target.classList.contains('anim-target-fadeInUp')) {
                    entry.target.classList.add('animated', 'fadeInUp');
                }
                if (entry.target.classList.contains('anim-target-bounceIn')) {
                    entry.target.classList.add('animated', 'bounceIn');
                }
                if (entry.target.classList.contains('anim-target-zoomIn')) {
                    entry.target.classList.add('animated', 'zoomIn');
                    entry.target.style.opacity = 1;
                }
            }
            else {
                entry.target.classList.remove('animated', 'fadeIn', 'fadeInUp', 'bounceIn', 'zoomIn');
                entry.target.style.opacity = 0;
            }
        });
    });

    document.querySelectorAll('.anim-target').forEach(image => {
        observer.observe(image);
    });
});

Answer 1

您可以替换

if (entry.target.classList.contains('anim-target-fadeIn')) {
    entry.target.classList.add('animated', 'fadeIn');
}
if (entry.target.classList.contains('anim-target-fadeInUp')) {
    entry.target.classList.add('animated', 'fadeInUp');
}
if (entry.target.classList.contains('anim-target-bounceIn')) {
    entry.target.classList.add('animated', 'bounceIn');
}
if (entry.target.classList.contains('anim-target-zoomIn')) {
    entry.target.classList.add('animated', 'zoomIn');
    entry.target.style.opacity = 1;
}

使用

var classList = entry.target.classList;

entry.target.classList.add('animated', classList.split('-')[2]);

if (classList.contains('anim-target-zoomIn')) {
    entry.target.style.opacity = 1;
}

Answer 2

考虑使代码DRYer：

干燥：

let animArr = ["animated"]
let etcl = entry.target.classList

if (etcl.contains("anim-target-fadeIn")) {
   animArr.push(["fadeIn"])
}
if (etcl.contains("anim-target-fadeInUp")) {
  animArr.push(["fadeInUp"])
}
if (etcl.contains("anim-target-bounceIn")) {
  animArr.push(["bounceIn"])
}
if (etcl.contains("anim-target-zoomIn")) {
  animArr.push(["zoomIn"])
  entry.target.style.opacity = 1;
}

etcl.add(...animArr)

甚至DRYer：

let animStyles = ["fadeIn","fadeInUp","bounceIn","zoomIn"]
let et = entry.target
let animArr = [] 

animStyles.forEach(style => {
    if(et.classList.contains("anim-target-" + style)){
        animArr = animArr.concat(["animated", style])
    }
}

et.style.opacity = et.classList.contains("anim-target-zoomIn") ? 1 : 0

et.classList.add(...animArr)

Answer 3

仅使用单个类.anim和所需的动画类型类。
使用classList.toggle()来切换/触发.animated类：

const animEntry = (ent) => ent.target.classList.toggle('animated', ent.isIntersecting);
const animObserve = () => {
  const observer = new IntersectionObserver(ents => ents.forEach(animEntry));
  document.querySelectorAll('.anim').forEach(el => observer.observe(el));
}
document.addEventListener("DOMContentLoaded", animObserve);

.anim {
  height: 50vh;
  width: 50vh;
  background: #f48024;
  position: relative;
  transition: 1.2s;
  margin: 500px auto;
}

.fadeIn            {opacity:0;}
.fadeIn.animated   {opacity:1;}
.fadeInUp          {opacity:0; transform: translateY(100%); }
.fadeInUp.animated {opacity:1; transform: translateY(0%);}
.zoomIn            {transform: scale(0);}
.zoomIn.animated   {transform: scale(1);}
.rotateCW          {transform: rotate(0deg);}
.rotateCW.animated {transform: rotate(1turn);}

Scroll down...
<div class="anim fadeIn">fadeIn</div>
<div class="anim fadeInUp">fadeInUp</div>
<div class="anim zoomIn fadeIn">zoomIn &amp; fadeIn</div>
<div class="anim rotateCW">rotateCW</div>

没有一堆IF语句，是否有更简洁的方式编写此代码？

3 个答案: