- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在下面为 bootstrap 4 轮播创建了一个演示,其转换速度减慢到 30 秒,以便每个人都可以检查并正确查看 js 添加的动态 css:
.carousel-item {
transition: transform 30s ease-in-out!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.js"></script>
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">Third slide</text></svg>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
margin-right: -100%
然后转换事件幻灯片
translateX(-100%)
.我不明白的是:
margin-right -100%
应该为每张幻灯片创建负空间,使它们都出现在彼此的顶部,但实际上它们是并排的,为什么?
1
和
2
来到同一个地方。他们被给予
float: left
就像 Bootstrap 一样。
最佳答案
问题一:margin-right
实际上是将幻灯片放在彼此的顶部 - 这是修复此问题并使幻灯片彼此相邻出现的 CSS 转换。看看this example幻灯片被迫 display: block
你会看到第三张幻灯片,另外两张叠在下面。
使用margin-right: -100%
的真正原因是确保幻灯片连续显示,而不是垂直堆叠。见 this example幻灯片可见并且去除了负边距 - 您可以向下滚动以查看所有幻灯片垂直堆叠。
问题二:
那么为什么右边的幻灯片也会发生变化呢?这个调试起来有点棘手,但我认为正在发生的是 Bootstrap 在右侧幻灯片中添加了两个类:carousel-item-next
和 carousel-item-left
如果您查看源 CSS,carousel-item-next
添加 transform: translateX(100%)
到元素。但是该 CSS 规则仅在第二个类不存在时才包含转换:
.carousel-item-next:not(.carousel-item-left),
transform: translateX(100%);
}
所以我认为正在发生的是 Bootstrap 正在添加第一类(
carousel-item-next
),然后在添加第二类(
carousel-item-left
)之前有一点延迟。
translateX(100%)
然后立即将其删除。因为幻灯片元素上有一个过渡,这会导致右侧幻灯片从
translateX(100%)
开始动画。至
translateX(0)
,或从右到左。
Move
按钮触发运动。注意
setTimeout
用于人为地模拟添加第一个和第二个 CSS 类之间的间隙:
const button = document.getElementById('move');
button.addEventListener('click', () => {
const childElements = document.querySelectorAll('.child');
childElements[0].classList.toggle('left');
childElements[1].classList.toggle('right');
setTimeout(() => {
childElements[1].classList.toggle('skip');
}, 0);
});
#move {
position: absolute;
top: 10px;
left: 55%;
}
.container {
position: relative;
width: 50%;
}
.child {
display: none;
position: relative;
width: 100%;
height: 300px;
border: 1px dotted blue;
float: left;
margin-right: -100%;
transition: 1s transform ease;
}
.left {
transform: translateX(-100%);
}
.right:not(.skip) {
transform: translateX(100%);
}
.active,
.right {
display: block;
}
<div class="container">
<div class="child active">1</div>
<div class="child">2</div>
</div>
<button id="move">Move</button>
关于html - 负边距如何在 Bootstrap 轮播中起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69078789/
我有一个非常基本的 MySQL 查询,它从数据库表中读取行并将行值添加或减去定义为 $total_balance 的 PHP 字符串。 例如; $statement_details_query = m
我有 following fiddle ,请注意,如果您使输出的宽度变小,图像将被覆盖并且不会出现滚动条 - 完美。 如果我attempt the same effect on the right ,
这个正则表达式将得到 456。我的问题是为什么它不能是 1-234-56 中的 234 ? 56 是否限定 (?!\d)) 模式,因为它不是单个数字。 (?!\d)) 寻找的起始点在哪里? impor
我需要知道两个子结构之间的内存距离 (&my_type.a - &my_tape.b.c) 结果的类型是什么?我需要将它转换为 (signed int),所以显然它是别的东西。 最佳答案 根据 C11
我遇到了一个扩展异常的异常处理程序类,如下所示: public class AppFileReaderException extends Exception { //Explicit seri
如何可视化负 RGB 值? 根据 OpenCV 文档: CV_8S - 8 位有符号整数 (-128..127) 这是否意味着 -128 表示 0 而 127 表示 255? 如果是,那我们为什么需要
我这里有一段代码给我带来了麻烦: idIndex = panoBuffer.indexOf("\"photo_id\":"); System.out.println(idIndex);
我刚刚练习 Java,对此还很陌生。我只是想创建一个随机数生成器程序来跟踪玩家的获胜、失败、获胜百分比和总获胜金额。该程序的逻辑是,玩家每次 session 有 3 次机会,计算机会生成一个随机数,玩
因此,我们被要求创建一个程序,使用户能够从 1-6 个有关矩阵运算的选项中进行选择。在每个用户的输入中,我们需要检查该输入是否适合要完成的操作(程序应该接受整数或 float ,正数或负数)。如果不满
这是我期望的输出 x |x| 1.2 1.2 -2.3 2.3 3.4 3.4 但我一直收到这个: x |x| 1
假设我有这个: $date1=date_create(date('H:I', strtotime('8:00'))); $date2=date_create(date('H:I', strtotime
如何确定负 FixNum 的无符号解释? # unexpected, true (~0b01111011).to_s(2) == ("-" + (~0b01111011).abs.to_s(2)) #
这是一个用于“邀请您的 friend 加入此群组”脚本的快速 SQL 查询。 我有 2 个表:users 和 group_members。我正在尝试执行一个查询,选择我所有的 friend ——由第一
负 ASCII 值有什么意义? int a = '«'; //a = -85 but as in ASCII table '<<' should be 174 最佳答案 没有负数ASCII值。 ASC
我知道用 PHP 可以做到这一点,但是有没有办法只用 MySQL 来做到这一点? 我有这个数据库: --------------------------------------------------
我在变量中有一个时间戳 $data = (float) -2208988800; 是否可以根据这些数据创建正确的日期?date("d.M.Y", $data) 返回“07.02.2036” 最佳答案
你好我如何将括号格式的负值转换为 double 值。目前我有这个。 Payment.Text = Calc_Payment().ToString("#,##0.00;(#,##0.00)"); 将支付
这是一个小程序。这应该打印 0 或 1,还是它有未定义的行为? #include struct S0 { unsigned f1 : 1; }; struct S0 s; int main (v
运行 lgb.cv 时,我有时会从日志中看到“从分数开始训练”后的负数。想知道这个数字到底是什么意思,单位是什么?是根据参数中指定的指标吗?以下是摘录: [LightGBM] [Info] Total
我正在使用变分自动编码器类型模型,我的损失函数的一部分是均值为 0 和方差为 1 的正态分布与另一个均值和方差由我的模型预测的正态分布之间的 KL 散度。 我用以下方式定义了损失: def kl_lo
我是一名优秀的程序员,十分优秀!