#html #css #animation #media-queries #responsive
#HTML #css #Анимация #медиа-запросы #отзывчивый
Вопрос:
Интересно, может ли кто-нибудь помочь мне с проблемой анимации CSS (ошибка?) это я ломал голову над прошлой неделей, но не могу решить.
По сути, я работаю над вторичной системой вспомогательной навигации для адаптивного веб-сайта. На небольших экранах (в первую очередь для мобильных устройств) элементы навигации отображаются как обычные круговые сенсорные мишени. Когда окно просмотра / точка останова шире 1024 пикселей, элементы навигации изменяют форму в виде фиксированных полос в левой и правой частях окна просмотра. У меня вся навигация оформлена и функционирует так, как требуется, только с помощью HTML / CSS (см. Ниже). Никаких проблем и работает в разных браузерах.
Тем не менее, я хотел сделать вещи немного более визуально привлекательными, добавив очень простую анимацию CSS. При добавлении вышеупомянутых CSS-анимаций элементы навигации с фиксированными полосами теперь плавно перемещаются на место, слева и справа соответственно, когда размер окна просмотра больше 1024 пикселей. Опять же, никаких проблем … и я лично считаю, что это выглядит прекрасно! 🙂
Тем не менее, я испытываю неожиданное поведение с фиксированным элементом навигации с правой стороны. Это заметно, когда размер окна браузера изменяется вручную.
При открытии страницы (на видовых экранах шириной более 1024 пикселей) оба элемента навигации с фиксированной панелью плавно перемещаются слева и справа, как и ожидалось. Однако, если размер окна просмотра изменен до 1024 пикселей и перенесен обратно на 1024 пикселей, вы можете видеть, что, хотя элемент навигации с левой стороны плавно скользит (как и ожидалось), элемент навигации с правой стороны просто внезапно появляется.
Кроме того, когда окно просмотра меньше 1024 пикселей для отображения целевых элементов навигации с круговым касанием и страница обновляется, элемент навигации с левой стороны остается фиксированным (как и ожидалось), однако элемент навигации с правой стороны тупо скользит с правой стороны.
Я изменил CSS множеством способов, но, похоже, не могу исправить эту проблему. Я также ценю, что средний посетитель сайта никогда не заметит эту особенность из-за того, что они вряд ли будут изменять размер окна своего браузера, как я! Тем не менее, это серьезно беспокоит меня, и я хотел бы узнать, что вызывает проблему. Это то, как написан мой CSS, или это какая-то особенность CSS / анимации?
Я включил CSS / HTML ниже и надеюсь, что кто-нибудь сможет указать мне правильное направление. Я в основном хочу, чтобы элементы навигации слева и справа вели себя точно так же, независимо от размера области просмотра или обновления страницы. Функциональная асимметрия этого серьезно достает меня! 😉
Спасибо.
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Side nav test</title>
<style>
@charset "UTF-8";
a {text-decoration: none;}
.wrap {
box-sizing: content-box;
margin: 0 auto;
padding-left: .75rem;
padding-right: .75rem;
max-width: 36rem;
}
/* <----------Problem area start? */
.pagination-item {
position: relative;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: red;
color: #fff;
border-bottom: 0;
}
.pagination-item:hover, .pagination-item:focus {background: #000;}
.pagination-item.left {
float: left;
display: grid;
}
.pagination-item.right {
float: right;
display: grid;
}
.pagination-label svg {
position: relative;
top: 50%;
display: block;
margin: -6px auto 0;
width: 24px;
height: 12px;
}
.pagination-label-text {display: none;}
@media all and (min-width: 1024px) {
.pagination-item {
position: fixed;
width: 1.75rem;
height: 100%;
top: 0;
border-radius: 0;
}
.pagination-label {
display: block;
height: 100%;
width: 1.4rem;
font-size: 0.75rem;
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-weight: bold;
writing-mode: tb-rl;
text-align: center;
}
.pagination-label-text {display: inline;}
.pagination-item svg {
display: inline;
position: static;
}
.pagination-item.left {
left: 0rem;
left: -200px;
-webkit-animation: slide-left 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide-left 0.5s forwards;
animation-delay: 0.3s;}
@-webkit-keyframes slide-left {100% { left: 0; }}
@keyframes slide-left {100% { left: 0; }}
}
.pagination-item.right {
right: 0rem;
right: -200px;
-webkit-animation: slide-right 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide-right 0.5s forwards;
animation-delay: 0.3s;}
@-webkit-keyframes slide-right {100% { right: 0; }}
@keyframes slide-right {100% { right: 0; }}
}
}
/* <----------Problem area stop? */
@media all and (pointer: coarse) {}
html {font: normal 400 1.5em/1.5 Georgia, serif;}
</style>
</head>
<body>
<main class="main" role="main">
<header class="wrap">
<h1>Side nav test</h1>
</header>
<div class="text wrap">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<br>
</div>
<nav class="pagination 1 wrap">
<a class="pagination-item left" href="#" rel="prev" title="A">
<span class="pagination-label"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.0231772,0,0,0.0231772,1.56664,0.066656)">
<path d="M201.373,73.373L41.373,233.373C28.876,245.869 28.876,266.131 41.373,278.627L201.373,438.627C213.87,451.123 234.131,451.123 246.628,438.627C259.126,426.131 259.126,405.869 246.628,393.373L141.254,288L836.313,288C853.986,288 868.313,273.674 868.313,256C868.313,238.327 853.986,224 836.313,224L141.254,224L246.627,118.627C252.875,112.379 256,104.189 256,96C256,87.811 252.876,79.621 246.628,73.373C234.13,60.876 213.87,60.876 201.373,73.373Z" style="fill-rule:nonzero;"/>
</g>
</svg>
<span class="pagination-label-text">This way</span></span></a>
<a class="pagination-item right" href="#" rel="next" title="B">
<span class="pagination-label"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 24 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.0231771,0,0,0.0231771,10.5667,0.0666657)">
<path d="M310.627,438.627L470.627,278.627C483.124,266.131 483.124,245.869 470.627,233.372L310.627,73.372C298.13,60.876 277.869,60.876 265.372,73.372C252.875,85.869 252.875,106.13 265.372,118.627L370.745,224L-324.314,224C-341.987,224 -356.314,238.327 -356.314,256C-356.314,273.673 -341.987,288 -324.314,288L370.745,288L265.372,393.373C259.124,399.621 256,407.811 256,416C256,424.189 259.124,432.379 265.372,438.627C277.869,451.124 298.13,451.124 310.627,438.627Z" style="fill-rule:nonzero;"/>
</g>
</svg>
<span class="pagination-label-text">That way</span></span></a>
</nav>
</main>
</body>
</html>