Question

我正在制作一支手风琴，我可以点击每个手风琴折叠。当css负责动画时，javascript切换一个类。

当手风琴折叠正在转换（展开或收缩）时，我想将所有的手风琴折叠不透明度设置为1.当css转换完成时，我想将不透明度重置为先前的值，但稍微延迟到避免任何闪烁。

我一直在尝试使用 transitionend 和 setTimeout 来弄清楚如何执行此操作，但时间已完全关闭。任何想法都赞赏。到目前为止我的代码：

HTML：

<div class="accordion">

    <div class="accordion__fold">
        <img src="img/concept.jpg" alt="Concept" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--concept"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/lightbulb.svg" alt="Lightbulb">
            <h3 class="accordion__fold-heading">Concept</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

    <div class="accordion__fold">
        <img src="img/ux.jpg" alt="UX/UI" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--ux"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/penn.svg" alt="Penn">
            <h3 class="accordion__fold-heading">UX/UI</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

    <div class="accordion__fold">
        <img src="img/code.jpg" alt="Code" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--code"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/code.svg" alt="Code">
            <h3 class="accordion__fold-heading">Code</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

</div>

CSS：

.accordion__fold--active {
    flex-grow: 8;
}

.accordion__fold-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  transition: all 0.25s ease-in-out;
}

.accordion--loading .accordion__fold-overlay {
  opacity: 1;
}

使用Javascript：

const $accordion = $('.accordion');
const $folds = $('.accordion__fold');

$folds.each((index, fold) => {
    const $this = $(fold);

    $this.on('click', () => {

        // toggle active fold
        $folds.not($this).removeClass('accordion__fold--active');
        $this.toggleClass('accordion__fold--active');

        // set loading class
        $accordion.addClass('accordion--loading');

        $this.on('transitionend', () => {

            // remove loading class (timing is often off)
            setTimeout(() => {
                $accordion.removeClass('accordion--loading');
            }, 250);
        });
    });
});

Accordion - 在css转换上添加/删除加载类（计时问题）

0 个答案: