如何覆盖引导程序4折叠菜单上的默认动画

Question

我想覆盖Bootstrap 4的折叠元素的默认向下滑动动画。

当你点击按钮打开一个折叠的元素时，我希望元素三维旋转，而不是像正常的bootstrap 4过渡那样向下滑动。

以下是我迄今为止所做的工作：https://codepen.io/tasmaniaman/pen/LYNMOdy

CSS：

<style>
.collapse:not(.show),
.collapse {
display:block;
visibility:visible;
}
.collapsing {
-webkit-transition: none;
transition: none;
}
.collapse {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: 1s transform ease-in;
-o-transition: 1s transform ease-in;
transition: 1s transform ease-in;
}
.collapse.show {
-webkit-transform: perspective(400px) rotate3d(0, 0, 0, 0);
transform: perspective(400px) rotate3d(0, 0, 0, 0);
-webkit-transition: 1s transform ease-out;
-o-transition: 1s transform ease-out;
transition: 1s transform ease-out;
}
</style>

当你点击代码笔示例中的按钮时，元素会很快出现，因为我已经覆盖了折叠类上的默认转换，当你再次点击它时，元素就会正确地3d旋转出来。

当元素出现时，我想要相同的三维旋转。任何来自bootstrap 4/css大师的帮助都将不胜感激。

Answer 1

给你，伙计。我帮你修的。注意，.collapsing是我们应该更改的类，以便在返回的过程中获得相同的转换。所以我不得不重写一些属性。使用!important和没有它的代码就无法工作。因为引导程序使用javascript来执行转换。

.collpasing是利用高度和过渡使其从上到下，从下到上返回。因此，我确实覆盖了高度，并将其放入auto

此外，为了使转换从确切的位置发生，它必须使用transform-origin，如果你将其从collapsing中移除，它将看起来像一张翻转的卡片。

除此之外，必须使用!important覆盖转换，否则无法应用自定义转换。

最后基于您的代码。您必须保留在以下类中使用的!important。

.collapse:not(.show),
.collapse 

没有它，它就会消失。

.collapse:not(.show),
.collapse {
display: block !important;
visibility: visible;
}
.collapse.show {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: 1s transform ease-in;
-o-transition: 1s transform ease-in;
transition: 1s transform ease-in;
}
.collapsing {
height: auto !important;
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0);
transform: perspective(400px) rotate3d(1, 0, 0, 0);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: 1s transform ease-out !important;
-o-transition: 1s transform ease-out !important;
transition: 1s transform ease-out !important;
}

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
<div class="row">
<div class="col-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body bg-secondary">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
</div>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>

Answer 2

我想我已经解决了@ahmad-请参阅codepen：https://codepen.io/tasmaniaman/pen/LYNMOdy

.flip {
-webkit-transition: .25s transform ease-in-out !important;
-o-transition: .25s transform ease-in-out !important;
transition: .25s transform ease-in-out !important;
display: block !important;
visibility: visible;
}
.collapse.show {  
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0);
transform: perspective(400px) rotate3d(1, 0, 0, 0);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: .25s transform ease-in-out !important;
-o-transition: .25s transform ease-in-out !important;
transition: .25s transform ease-in-out !important;
}
.collapsing {
height: auto !important;
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: .25s transform ease-in-out;
-o-transition: .25s transform ease-in-out;
transition: .25s transform ease-in-out; 
}
.collapse:not(.show) {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition: .25s transform ease-in-out;
-o-transition: .25s transform ease-in-out;
transition: .25s transform ease-in-out; 
}
<div class="container">
<div class="row">
<div class="col-12">
<button class="btn btn-primary rounded-0 shadow-none" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Open Sesame
</button>
<div class="flip collapse rounded-0" id="collapseExample">
<div class="card card-body bg-secondary rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
</div>