0

我正在构建一个手风琴，我在点击时切换每个手风琴折叠。javascript 切换一个类，而 css 负责动画。

当手风琴折叠过渡（扩展或收缩）时，我想将所有手风琴折叠不透明度设置为 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);
        });
    });
});
4

0 回答 0