转换在 iOS Safari 上不起作用 - 尝试了所有不同的后缀答案

【问题标题】：Transitions not working on iOS safari - tried all the different suffix转换在 iOS Safari 上不起作用 - 尝试了所有不同的后缀
【发布时间】：2021-07-28 03:10:21
【问题描述】：

我已经阅读了有关此问题的多个主题，并且我确定我遗漏了一些非常明显的东西，但我就是看不到它。以下在其他浏览器（Google、Brave 等）上运行良好，但在 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%);
}

【问题讨论】：

这能回答你的问题吗？ IOS Safari transition transform not working
不，这正是我所做的，但仍然无法正常工作

标签： css flexbox css-transitions

【解决方案1】：

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

【讨论】：

确实如此 - 但是，它仍然无法正常工作。 -webkit- 似乎无法在 iOS 上运行，我不知道为什么......
您应该更改顺序：首先是前缀设置，然后是常规设置，即transition after -webkit-transition
我在上面进行了编辑 - 仍然没有显示任何过渡或变换。我只是忘记了一些明显的事情吗？
您只发布了 CSS 代码（没有 HTML），因此无法检查您的特定代码...

【解决方案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>

【讨论】：

当你运行代码时：按下 flex-items 来查看想要的效果。我用绿色代替了原来的黑色。