Функция CSS calc для задержки перехода

Question

Я пытаюсь использовать функцию CSS calc внутри свойства transition-delay.

задержка перехода, кажется, работает правильно, используя синтаксис:

transition-delay: 0.08s; 

известково свойство работает для меня при расчете размеров на экране, но я не мог заставить его работать для расчета времени таким образом:

transition-delay: calc(0.08s * 1); 

Возможно ли получить этот результат без предварительных процессоров?

UPDATE: решаемые

Это действительно корректный синтаксис, но не поддерживается некоторыми браузерами, включая Firefox и IE.

Answer 1

Это работа - calc(), как ожидается, работать с измерениями ^[1] с участием: длина^[2] (px, em, ex, ch, rem, %, vw, vh, vmin , vmax, mm, cm и т. Д.), углы^[3] (), rad, grad, turn), время^[4] (ms, s) и даже частоты и целые числа.

Если вы посмотрите на скрипку ниже, вы увидите, что базовая единица времени перехода составляет 100 мс, но я умножил ее на 20, чтобы достичь конечного времени перехода в две секунды, используя. Время перехода изменяется и рассчитывается соответственно без проблем.

Я подозреваю причину, по которой calc() «не работает» в вашем случае, либо (1), потому что единица измерения не поддерживается используемым вами браузером, либо что (2) вы умножаете время перехода с коэффициентом 1, который, конечно, возвращает то же значение;)

div { 
 
    background-color: #eee; 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: all calc(0.1s * 20) ease-in-out; 
 
    } 
 

 
div:hover { 
 
    background-color: #b13131; 
 
    }

<div></div>

Источник:

1. https://developer.mozilla.org/en-US/docs/Web/CSS/calc
2. https://developer.mozilla.org/en-US/docs/Web/CSS/length
3. https://developer.mozilla.org/en-US/docs/Web/CSS/angle
4. https://developer.mozilla.org/en-US/docs/Web/CSS/time

---

Update: Я бы сказал, что это весьма вероятно, что calc() в основном используется для вычисления измерения длины в браузерах, реже так для других видов измерений, особенно когда это еще экспериментальная особенность. Вот результаты теста довольно зачаточном браузера я сделал до сих пор:

• Chrome (39,0): поддерживается
• Firefox:
  • 32.0.3: не поддерживается
  • 35.0: не поддерживается
• Internet Explorer (11.0)): не поддерживается
• Safari (8.0.2): не поддерживается

Учитывая общее отсутствие поддержки calc() в отличных от длины измерений, я предлагаю вам придерживаться CSS препроцессора, или JS (в зависимости от предпочтения развертывания) для достижения желаемого эффекта.

Answer 2

Я пробовал, и он отлично работает для меня. Здесь проверить код

<div id="circle"></div> 

#circle{ 
width:100px; 
height:100px; 
background:#000; 
border-radius:50%; 
margin:50px auto; 
transition:all calc(1s*2) ease; 
} 
#circle:hover{ 
background:#555; 
} 

Надеется, что это было полезно для вас http://jsfiddle.net/p243bk8g/1/