Question

我有一个包含3个可以激活的选项的div，当选择其中一个选项（变为活动状态）时，与该元素关联的连接符/行应该触发并启动动画。到目前为止，我已经显示了它，但无法确定每次第一个选项变为活动时如何触发动画，并在它不活动时禁用它。

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="demo">
<div class="demo__content">
    <h2 class="demo__heading">Assessment <small></small></h2>
    <div class="demo__elems">
        <div class="demo__elem demo__elem-1">Novice Assessment</div>
        <div class="demo__elem demo__elem-2">Intermediate Assessment</div>
        <div class="demo__elem demo__elem-3">Advanced Assessment</div>
        <span class="demo__hover demo__hover-1 active"></span>
        <span class="demo__hover demo__hover-2 active"></span>
        <span class="demo__hover demo__hover-3 active"></span>
        <div class="demo__highlighter">
            <div class="demo__elems">
                <div class="demo__elem">Novice Assessment</div>
                <div class="demo__elem">Intermediate Assessment</div>
                <div class="demo__elem">Advanced Assessment</div>
            </div>
        </div>
        <div class="demo__examples">
            <div class="demo__examples-nb">
                <div class="nb-inner">
                    <div class="example example-adv">
                        <div class="example-adv">
                            <div class="example-adv__top">
                                <div class="example-adv__top-search"></div>
                            </div>
                            <div class="example-adv__mid"></div>
                            <div class="example-adv__line"></div>
                            <div class="example-adv__line long"></div>
                        </div>
                    </div>
                    <div class="example example-web">
                        <div class="example-web__top"></div>
                        <div class="example-web__left"></div>
                        <div class="example-web__right">
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                            <div class="example-web__right-line"></div>
                        </div>
                    </div>
                    <div class="example example-both">
                        <div class="example-both__half example-both__left">
                            <div class="example-both__left-top"></div>
                            <div class="example-both__left-mid"></div>
                        </div>
                        <div class="example-both__half example-both__right">
                            <div class="example-both__right-top"></div>
                            <div class="example-both__right-mid"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

   document.addEventListener('DOMContentLoaded', function() {
   $(document).ready(function() {
       $('.demo__hover').on('click', function() {
           $that = $(this);
           if ($('.demo__hover.active').length > 0) {
               $('.active').removeClass('active');
           }
           $($that).addClass('active');
       })
   })

}）;

Answer 1

我强烈建议重构我的代码但是我编辑了你的pin，添加了一个默认阻止动画的类：

.block-anim {
  animation: none !important;
}

和一些处理它的脏JS

https://codepen.io/ThomasTognacci/pen/POqRJa

如何在活动时同步显示其他元素的div容器

1 个答案: