Question

在我的网站中，我在向下箭头和向下箭头之间切换。和向上箭头。见here

如何将其更改为CSS转换，那么交换机之间会有短暂的中断？

这是我的代码：

＆＃13;

function close_accordion_section(source) {
    $(source).parent().find('.accordion-section-title').removeClass('active');
    $(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function (e) {
    if ($(e.target).is('.active')) {
        close_accordion_section(e.target);
    } else {
        $(this).addClass('active');
        $(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
    }

    e.preventDefault();
});

＆＃13;

.accordion {
    overflow: hidden;
    margin-bottom: 40px;
}
.accordion-section {
    padding: 15px;
    border: 1px solid #d8d8d8;
    background: #fbfbfb;
}
.accordion-section-title {
    width: 100%;
    display: inline-block;
    background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
    background-size: 5% 100%;
    background-repeat: no-repeat;
    background-position: top right;
}
.accordion-section-title.active {

  background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
     background-size: 5% 100%;
    background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
    text-decoration: none;
    transition: color 0.1s linear;
}
.accordion-section-content {
    padding: 15px 0;
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
    <div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>

        <div id="accordion-1" class="accordion-section-content">
            <p>Text.</p>
            <p>
        </div>
    </div>
</div>

＆＃13;

Answer 1

你可以用我能想到的两种方式做到这一点。一个是通过jQuery-UI添加一个

.delay(2000)

到过渡期结束。另一种方式是在你的css课程中为你的过渡做一个

transition-delay: 2s;

对于箭头，最好转换和旋转图像。

.rotate{
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

以下是一个简洁的网站：http://www.css3maker.com/css3-transition.html

在图像切换之间添加CSS Transition

1 个答案: