小编Red*_*Red的帖子

当我同时使用transition和transform,那么动画是不是都非常流畅chrome和firefox.当你将鼠标悬停在它上面时它会模糊.唯一正常的浏览器是IE.

Chome/FireFox(注意文本,当动画开始时它开始变得模糊.当它完成时它会弹回到平滑的字母.)

期望的结果(这在IE中工作)

如何让这些动画也光滑chrome和firefox？

片段:

转换完成后,元素必须再次聚焦.那是什么样子,现在的chrome和firefox.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

我得到了一个package.json ，我在其中使用导出字段导出不同的脚本。

"exports": {\n  ".": {\n    "default": "./dist/main.es.js",\n    "require": "./dist/main.cjs.js",\n    "types": "./dist/main.d.ts"\n  },\n  "./utils": {\n    "default": "./dist/utils.es.js",\n    "require": "./dist/utils.cjs.js",\n    "types": "./dist/utils.d.ts"\n  },\n  "./segments/*": {\n    "default": "./dist/webvtt/segments/*.es.js",\n    "require": "./dist/webvtt/segments/*.cjs.js",\n    "types": "./dist/webvtt/segments/*.d.js"\n  }\n}\n

文件结构如下

dist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.cjs.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.es.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 utils.cjs.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 utils.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 utils.es.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 vite.svg\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 vtt.cjs.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 vtt.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 vtt.es.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webvtt\n  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 segments\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Comment.cjs.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Comment.d.ts\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Comment.es.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Cue.cjs.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Cue.d.ts\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Cue.es.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Header.cjs.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Header.d.ts\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Header.es.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Segment.cjs.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Segment.d.ts\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Segment.es.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Style.cjs.js\n     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Style.d.ts\n …

该TextTrackList.onchange事件在IE和Edge中不起作用.在Chrome和FireFox中它运行正常.

有什么选择我可以使用吗？我搜索了可用的事件,但找不到任何.

或者我该如何创建变通方法？它适用于所有浏览器吗？

https://www.javascripture.com/TextTrackList

var video = document.getElementById('video');

video.textTracks.addEventListener('change', function () {
  console.log("TextTracks change event fired!");
});

video {
  max-width: 400px;
  max-height: 400px;
}

<video controls id="video">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4" type="video/mp4" />
  <track label="Caption #1" kind="subtitles" srclang="nl" src="path/to/caption1.vtt">
  <track label="Caption #2" kind="subtitles" srclang="en" src="path/to/caption2.vtt">
  <track label="Caption #3" kind="subtitles" srclang="de" src="path/to/caption3.vtt">
</video>

是否（允许）建议将.col-*'s 用作.d-flex容器中的子项？或者不是.d-flex应该使用的方式而是使用.row？

在Bootstrap 4 Docs 中，我找不到任何.col-*在.d-flex容器中使用 a 的示例。他们只使用这样的布局

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

但是这些.p-2类不会使这些列响应。他们只有一个padding定义，没有width给出。

所以例如我想要这样的东西：

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex …

我想将我的 h3 标题和按钮放在同一行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
  <div class="get-quote">
    <div class="row">
      <div class="col-md-12">
        <h3 id="quote">IN HOUSE EMBROIDERY AND HEAT TRASNFER</h3> <button type="button" class="pull-right" class="btn btn-primary">Get Quote</button>
      </div>
    </div>
  </div>
</div>

我使用NPM安装了bootstrap