bootstrap carousel-item 过渡需要 !important to work

编程问答 2022-06-02

问题描述

我能够让它工作，但必须将 !important 添加到 .carousel-item 转换中。有没有另一种方法来指定过渡，所以我不需要使用 !important？

我知道我可以添加另一个类，如 .slow，然后使用 .carousel-item.slow，但想知道是否有引导类或不同的方式来做到这一点。文档说：

更改过渡持续时间 .carousel-item 的转换持续时间可以在编译之前使用 $carousel-transition Sass 变量进行更改，或者如果您使用的是已编译的 CSS，则可以自定义样式。如果应用了多个转换，请确保首先定义转换转换（例如转换：转换 2 秒缓动，不透明度 0.5 秒缓出）。但是在没有 !important 的情况下应用时似乎不起作用。

$(document).ready(function() {
    $('.carousel').on('click',function() {        
        if (!$(this).hasClass('paused')) {
            $('.carousel').carousel('pause');
            $('.carousel').toggleClass('paused');
            $('.carousel-caption').css("color","lightgrey");
            $(".carousel-item").css("filter","blur(2px)");
        } else {
            $('.carousel').carousel('cycle');
            $('.carousel').toggleClass('paused');
            $('.carousel-caption').css("color","white");
            $(".carousel-item").css("filter","blur()");
        }
    });
});
html,body{
    height:100%;
}
#cover{
    background: #222 url('img/stars.jpg')center center no-repeat;
    background-size:cover;
    color:white;
    height:100%;
    text-align:center;
    display:flex;
    align-items:center;
}
#cover-caption{
    width:100%;
}

.form-inline{
    justify-content:center;
}

.carousel-item {      
     transition:transform 5000ms linear!important;     
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>
        <Meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvcwpIPm49" crossorigin="anonymous"></script>
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnjsK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>  


    </head>

    <body>
        


        <section id="carousel">
            <div id="carousel-home" class="carousel slide col-6 mx-auto" data-ride="carousel" data-interval="3500">
                <ol class="carousel-indicators">
                    <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-home" data-slide-to="1"></li>
                    <li data-target="#carousel-home" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">

                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://via.placeholder.com/150" alt="taking a picture">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>A woman with a camera</h5>
                            <p>She is probably taking a picture</p>

                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/150" alt="spiders with rain">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Down came the rain</h5>
                            <p>and wshed the spider out</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://via.placeholder.com/150" alt="my heart">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Making love</h5>
                            <p>with their hands...</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">PrevIoUs</span>
                </a>
                <a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </section>
    </body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4css-transitions