Переход не работает в IE и Edge и Safari

У меня проблемы с добавлением перехода для преобразования в IE, Edge и на мобильном Safari. Существует элемент, который преобразуется другим классом, который добавляется с помощью jQuery. устанавливаемые сотовые полного элемент высоты выглядит следующим образом:Переход не работает в IE и Edge и Safari

.post-hero { 
    height: calc(100% - 178px); 
    width: 100%; 
    position: fixed; 
    left: 0; 
    padding: 0 25px; 
    margin-top: 128px; 
    transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1)); 
}

И это классы добавляются на событии нажатия

.up { 
    transform: translateY(-100%) translateY(88px); 
} 

.down { 
    transform: translateY(+100%) translateY(88px); 
}

Трансформирования хорошо работает в Firefox и Chrome. Но другой браузер должен поддерживать его, а также (http://caniuse.com/#search=transition)

Редактировать

Это все о синтаксисе. transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1)); недействительный CSS. Должно быть transition: 1.2s all cubic-bezier(0.22, 0.44, 0, 1);

источник

2017-01-20 Oliver

'переход: (1.2s, все, кубический Безье (0.22, 0.44, 0, 1)), 'действительно должен быть« переход: все 1.2s кубический-безье (0.22, 0.44, 0, 1); 'Для стенографического свойства вы отделяете разные свойства перехода, используя пробелы, а не запятыми, и вы не завертываете их в скобки. – connexo

Кроме того, у вас есть 'transform: translateY (-100%) translateY (88px);' определение двух разных переводов для одного и того же свойства 'translateY'. Вы уверены, что это то, что вы хотели? – connexo

'transform: translateY (-100%) translateY (88px); 'требуется, потому что IE не может вычислять внутри translateY, но был синтаксисом, как описано выше. – Oliver

Как уже упоминалось выше, это сочетание недостающего мета-тег: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> и ложный синтаксис CSS для перехода transition: (1.2s, all, cubic-bezier(0.22, 0.44, 0, 1));, который должен быть объявлен таким образом: transition: 1.2s all cubic-bezier(0.22, 0.44, 0, 1);

источник

2017-01-23 10:14:15 Oliver

Если у вас нет правильной декларации doctype в качестве самой первой строки в документе, IE войдет в режим совместимости, и большинство функций не будут работать должным образом. Убедитесь, что у вас есть действительный doctype (будет хорошо) и добавьте <meta http-equiv="X-UA-Compatible" content="IE=edge" /> к вашему документу.

источник

2017-01-20 13:06:03

Cheers, meta tag работает как шарм – Oliver

Это работает для вас –

pls. принимайте мой ответ, потому что он используется для других людей. Спасибо. –

Переход не работает в IE и Edge и Safari

ответ

Смежные вопросы