我有一行包含两个 div，一个是 col-md-11，另一个是 col-md-1。在这个 col-md-1 div 中，我有一个需要设置动画的下拉菜单。对于动画，我使用 animate css但问题是动画 slideInRight 从页面外部开始。我希望动画应该从行边界开始，而不是在下面的页面之外是我的 html
<div class="row m-0">
<div class="col-md-7">
</div>
<div class="col-md-5 text-right">
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left animated slideInRight" style="width:500px;">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
在这个动画slideInRight类中提供了滑入的动画。
最佳答案
在这个答案中，我在你的问题中使用了更新的代码，并对 animate.css 代码和 Bootstrap4 drop-down 元素进行了必要的修改，以便最终结果更符合我所理解的规定要求:
CSS
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}
这个解决方案是完全适应的，如果你想最终确定它，我很乐意与你合作:)
重要细节:
Bootstrap 4 类
text-right和dropdown-menu-lg-left是 不相容。菜单按钮在任何情况下都不会向左移动 如果将text-right添加到col-md-5。我更改了
translate3d的“y”属性，以便slideInRight出现在按钮下方。如果您愿意，则无需进行此更改menu-item滑入时覆盖按钮。如果你想 更改它然后 所有引用 到translate3d应该有 'y' 元素放回 0:translate3d(9rem, 2rem, 0);会变成translate3d(9rem, 0, 0);对所有对translate3d的引用进行了类似的更改。我改的
dropdown-item属性也演示了 该元素的适应性无需使用内联样式(如 用以前版本的代码编写)。
希望这个回答对 Feroz 有所帮助。如前所述，我将非常乐意与您合作完成满足您要求的解决方案。 :)
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(9rem, 2rem, 0);
transform: translate3d(9rem, 2rem, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 2rem, 0);
transform: translate3d(0, 2rem, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
.dropdown-item {
height: 2rem !important;
margin-bottom: 1rem !important;
padding: 1rem !important;
width: 25rem !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- <div class="container"> -->
<div class="row m-0">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
Right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left animated slideInRight" style="">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>关于html - Bootstrap 4 下拉菜单动画从页面外开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58603981/