过渡不适用于 iOS 野生动物园 - 尝试了所有不同的后缀

Question

我已经阅读了多个与此相关的主题，我确定我遗漏了一些非常明显的东西，但我就是看不到它。以下内容在其他浏览器（Google、Brave 等）上运行良好，但 transition/transforms 在 iOS 上无法运行。我错过了什么？？

 .flexitem {
  display:flex;
  flex-direction:column;
  -webkit-transition: -webkit-transform 0.20s ease 0s;
  transition: transform 0.20s ease;
    width:100%;
    background-color: white;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,25%);
    margin:2rem;
    height:70rem;
}

.flexitem:active {
  /* transform: scale(.98);
  transition: transform 0.20s ease; */
  -webkit-transform: scale(.95);
  -o-transform: scale(.95);
  -ms-transform: scale(.95);
  transform: scale(.95);
  box-shadow: 0 10px 40px rgba(0,0,0,25%);
}

Answer 1

transition 设置需要应用于元素的默认状态，而不是“待转换”状态（在您的情况下显然 :active）。

Answer 2

.flex-container {
    /* The green effect is your code with corrections */
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction
       and if we allow the items to wrap
     * Remember this is the same as:
     * flex-direction: row;
     * flex-wrap: wrap;
     */
    flex-flow: row wrap;

    /* Then we define how is distributed the remaining space */
    justify-content: space-around;

    padding: 0;
    margin: 0;
    list-style: none;

}

.flex-item {
    background: #0000ff;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: #ff0000;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

.flex-item:active {
    /* transform: scale(.98);
    transition: transform 0.20s ease; */
    transform: scale(.95);
    transition: transform 0.20s ease;
    -webkit-transform: scale(.95);
    -webkit-transition: -webkit-transform 0.20s ease 0s;
    -o-transform: scale(.95);
    -o-transition:transform 0.20s ease 0s;
    -ms-transform: scale(.95);
    box-shadow: 0 10px 40px rgba(100,200,0,25);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles/cssPracticeatMDN.css">
</head>
<body>
      <h1>Developer Network MDN</h1>

      <ul class="flex-container">
          <li class="flex-item">1</li>
          <li class="flex-item">2</li>
          <li class="flex-item">3</li>
          <li class="flex-item">4</li>
          <li class="flex-item">5</li>
          <li class="flex-item">6</li>
      </ul>
</body>
</html>

过渡不适用于 iOS 野生动物园 - 尝试了所有不同的后缀

Transitions not working on iOS safari - tried all the different suffix

css

flexbox

css-transitions