如何触发这两个事件？

Question

我正在尝试使用相交观察器，因此我同时使两个卡片滚动并淡入。唯一的问题是，它只能让我一次使用一种效果。取决于我放置过渡属性效果的位置，会发生哪种效果。 我创建了一些JavaScript，因此会在屏幕上显示一定数量的元素并从顶部开始100px后添加外观类，这部分是代码段，因此可以忽略。

const scrollFade = document.querySelectorAll(".fade-in");
const sliders = document.querySelectorAll('.slideIn');
const scrollOptions = {
    threshold: .5,
    rootMargin: "0px 0px -100px 0px"
};
const scrollObserver = new IntersectionObserver((entries, 
    scrollObserver) => {
    entries.forEach(entry => {
        if (!entry.isIntersecting) {
            return;
        } else {
            entry.target.classList.add('appear');
            scrollObserver.unobserve(entry.target);
        }
    });
},
scrollOptions);

scrollFade.forEach(scrollFade => {
    scrollObserver.observe(scrollFade);
});

sliders.forEach(slider => {
    scrollObserver.observe(slider);
});

.languages {
    order: 1;
    height: 100%;
    position: relative;
    flex-grow: 1;
    color:white;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.inner-languages {
    position: absolute;
    width: 15rem;
    height: 25rem;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    box-shadow:  10px 0px 2px rgba(2, 50, 88, .3);
    border: 5px solid rgba(2, 50, 88, 0.5);
    background-color: rgba(13, 115, 199, .5);
    
}
.inner-languages.appear {
    transform: translate(50%, -50%);
    transition: transform 1s ease-in;
}
}
.skills {
    order: 3;
    height: 100%;
    position: relative;
    flex-grow: 1;
    color:white;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.inner-skills {
        position: absolute;
        width: 15rem;
        height: 25rem;
        top:50%;
        right:0;
        transform: translate(0%, -50%);
        box-shadow: -10px 0px 2px rgba(2, 50, 88, .3);
        border: 5px solid rgba(2, 50, 88, 0.5);
        text-align: center;
        background-color: rgba(13, 115, 199, 0.5);
}
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-in.appear {
    opacity: 1;
    
}

 <div class="about-wrapper " id="about">
        <div class="triangle_3"></div>
        <div class="triangle_4"></div>
        <div class="about">
            <div class="inner-about">
                <h1>About</h1>
                <h2>Front-end Engineer</h2>
                <h3>Located in Portland, OR</h3>
            </div>
       </div>
       <div class="languages">
           <div class="inner-languages fade-in slideIn">
           
           </div>
       </div>
       <div class="skills">
           <div class="inner-skills fade-in slideIn">
           
           </div>
       </div>
       <div class="diamond"></div>
    
   </div>