У меня есть нижний колонтитул/ряд SVG, которые я сделал, но они не могут анимироваться во время перехода между 1-м и 2-м разделами. Код не прост для отладки, потому что ему нужно анимировать, если js управляет размером нескольких элементов. Ряд смелых пользователей придумали решения, которые работают в Chrome и Firefox, но чтобы получить кредит, решение должно работать и в Safari.
Я проверил, что классы, которые я добавляю при переходе (.fixed), действительно применяются, потому что они используют изменения размера SVG. Поэтому, в то время как SVG меняют размеры, по какой-то причине я все еще не могу получить переходы CSS для анимации. Вы можете просмотреть этот отказ для анимации в GIF ниже.
Нижний колонтитул не анимируется:
Элементы, которые, я считаю, нуждаются в коде перехода, - это сами SVG, которые относятся к классу areaSVG, потому что это те, кто меняется от max-height: 18vh до max-height: 9vh.. Однако, когда я добавляю некоторый код анимации в .areaSVG, это не сработало, поэтому, возможно, я ошибаюсь. Вот код перехода, который я попробовал добавить к исходным настройкам SVG (.areaSVG):
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
transition: max-height 1s;
Несколько месяцев назад, с помощью другого, более опытного кодера, я добавил функцию javscript, которая в какой-то момент анимировала SVG. Мы использовали JS для вызова window.requestAnimationFrame(startAnimation), но он больше не работает. Я прокомментировал детали, связанные с этим, но если вы можете подумать, что JS понадобится для анимации, не стесняйтесь разворачивать ручку кода и играть с ней. Подходящий ответ должен заставить анимацию работать в Safari, Chrome и Firefox.
Codepens
-
Это самая легкая, сведенная к минимуму версия, с которой вы должны устранять неполадки, поскольку она не имеет медиа-запросов (по запросу
@Eric N: http://codepen.io/ihatecoding/pen/LREOPW -
Это полный код, с медиа-запросами: http://codepen.io/ihatecoding/pen/ALjKKz
Селекторы
Селекторы в первом разделе (вверху страницы):
- Весь нижний колонтитул:
#indexFooter - Родители SVG:
.ey-col-svg - Сам SVG:
.areaSVG
Селекторы во второй секции (после прокрутки на 100 пикселей вниз):
- Весь фиксированный нижний колонтитул:
#indexFooter.fixed - Фиксированные родители SVG:
.ey-col-svg.fixed - Фиксированный сам SVG:
.areaSVG.fixed
Примечание. Когда страница сначала загружает родителя SVG (.ey-col-svg), а сам SVG (.areaSVG) невидим и имеет параметр display:none, чтобы избежать странного опыта для пользователя.
Вот информация о важных элементах в каждом разделе:
Большой нижний колонтитул (в первом разделе)
Введенный CSS (первый раздел)
/* The whole footer container */
#indexFooter {
text-align: center;
box-sizing: border-box;
position: fixed;
vertical-align: middle;
bottom: 0;
left: 0;
z-index: 5000;
max-height: 33.33vh;
width: 100%;
}
/* The SVG container*/
.ey-col-svg {
display: none;
height: auto;
text-align: center;
box-sizing: border-box;
padding: 0;
}
/* The SVG */
.areaSVG {
display: none;
max-height: 18vh;
box-sizing: content-box;
margin: 0;
}
Далее, JS запускается, а затем отображает элементы (все еще в первом разделе):
/* The SVG container*/
.ey-col-svg {
display: block;
}
/* The SVG*/
.areaSVG {
display: inline-block;
}
Малый нижний колонтитул (пока ниже первой секции)
После выхода из первой секции (когда нижний колонтитул должен быть меньше и фиксирован)
/* The SVG when low on page*/
.areaSVG.fixed {
max-height: 9vh;
}
Javascript/JQuery
Вот Javascript, если вы хотите его увидеть
$(document).ready(function() {
var sectionIndex = 1;
var animationName = 'indexAnimateLand';
startAnimation(); //includes resizing background image and resizing svgs
toggleIntroClass(); //adds css depending on section of page
// if the user resizes the window, run the animation again,
// and resize the landing
$(window).on('resize', function(){
startAnimation();
resizeLanding();
});
//sizes the landing image and the icons
function startAnimation() {
$('.ey-col-svg').css('display', 'block');
$('.areaSVG').css('display', 'inline-block');
resizeLanding(); // resize the background image
// window.requestAnimationFrame(startAnimation); //animate
} // end start Animation
//resizes the landing image and sets top margin for the following section
function resizeLanding() {
var $lndFooter = $('#indexFooter');
var $bgLand = $('#section0img');
var $contactSection = $('#section2Div');
var winHeight = $(window).height();
var lndFooterHeight = $lndFooter.height();
bgFinalHeight = winHeight - lndFooterHeight;
$bgLand.css("height", bgFinalHeight);
$contactSection.css("margin-top", bgFinalHeight);
}
// changes the .css classes depending on section,
//(also triggers landing image resize if necessary)
function toggleIntroClass(){
var winHeight = $(window).height();
var heightThreshold = $("#section0").offset().top;
var heightThreshold_end = $("#section0").offset().top + $("#section0").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//if user hasn't scrolled past 100px/the first section, adjust classes
if (scroll <= 100)
// (scroll >= heightThreshold && scroll < heightThreshold_end )
{
sectionIndex = 1;
$('#newHeader').removeClass('fixed');
$('#nameBoxIndexTop').removeClass('fixed');
$('#indexIconsContainer').removeClass('fixed');
$('#indexIconsList').removeClass('fixed');
$('#linkCell').removeClass('fixed');
$('#indexFooter').removeClass('fixed');
$('.ey-text-content').removeClass('fixed');
$('.ey-col-svg').removeClass('fixed');
$('.ey-col-1').removeClass('fixed');
$('.ey-row-scale').removeClass('fixed');
$('.ey-nav-bar').removeClass('fixed');
$('.areaSVG').attr("class", "areaSVG");
}
//else if they have scrolled past the first hundred pixels/first section, adjust classes
else {
sectionIndex = 2;
$('#newHeader').addClass('fixed');
$('#nameBoxIndexTop').addClass('fixed');
$('#indexIconsContainer').addClass('fixed');
$('#indexIconsList').addClass('fixed');
$('#linkCell').addClass('fixed');
$('#indexFooter').addClass('fixed');
$('.ey-text-content').addClass('fixed');
$('.ey-col-svg').addClass('fixed');
$('.ey-col-1').addClass('fixed');
$('.ey-row-scale').addClass('fixed');
$('.ey-nav-bar').addClass('fixed');
$('.areaSVG').attr("class", "areaSVG fixed");
}
}); //end inner scroll Function
};//end intro Class toggle function
});//end document ready
Любая помощь будет оценена! Спасибо!