时间戳

首页 > 解决方案 > 为不透明度应用的 CSS 规则与计算的样式不同

css - 为不透明度应用的 CSS 规则与计算的样式不同

问题描述

我正在检查https://ionicframework.com/docs/api/alert alert..

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
  <style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
  <script type="module">
    import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
    window.alertController = alertController;
  </script>
</head>
<body>
  <ion-app>
    <ion-header translucent>
      <ion-toolbar>
        <ion-title>Alert</ion-title>
      </ion-toolbar>
    </ion-header>,
    <ion-content fullscreen class="ion-padding">
      <ion-alert-controller></ion-alert-controller>
      <ion-button expand="block">Show Alert</ion-button>
    </ion-content>
  </ion-app>

  <script>
    const button = document.querySelector('ion-button');
    button.addEventListener('click', handleButtonClick);

    async function handleButtonClick() {
      const alert = await alertController.create({
        header: 'Use this lightsaber?',
        message: 'Do you agree to use this lightsaber to do good across the galaxy?',
        buttons: ['Disagree', 'Agree']
      });

      await alert.present();
    }
  </script>
</body>
</html>

那里有一个带有 .alert-wrapper 类的元素。

如果您查看应用的 CSS，它将显示不透明度：0，但计算显示不透明度：1 我正在检查的元素

应用 css

计算样式

我尝试从页面中删除所有 CSS 文件、所有 javascript、所有其他元素我试图将此元素移动到正文（在 iframe 之外）并应用 opacity: 0 在样式中，没有任何帮助，计算保持不透明度: 1..

这怎么可能？

标签： cssgoogle-chromeionic-frameworkfirefoxcomputed-style

解决方案

他们正在使用Web Animations API。

elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem {
  opacity: 0;
}
<div id="elem">Hello</div>

推荐阅读