Нежелательные пробелы, созданные с помощью анимации перехода CSS

Я создавал скроллированные анимации css, и у меня проблемы с моими экранами с правой стороны. Анимация работает именно так, как я хочу, но создает нежелательные пробелы на стороне страницы. Размер этого пробела, по-видимому, соответствует переходу, который я установил, и не уходит, пока я не запустил все анимации на странице. Любые идеи по удалению этого пробела, чтобы элементы перемещались из холста?Нежелательные пробелы, созданные с помощью анимации перехода CSS

Вот ссылка на мою среду тестирования http://lamp.cse.fau.edu/~zellis1/test/

/*Slide in right*/ 
.slidein-right{ 
    opacity: 0; 
    -moz-transition: all 750ms ease-out; 
    -webkit-transition: all 750ms ease-out; 
    -o-transition: all 750ms ease-out; 
    transition: all 750ms ease-out; 

    -moz-transform: translate3d(100px, 0px, 0px); 
    -webkit-transform: translate3d(100px, 0px, 0px); 
    -o-transform: translate(100px, 0px); 
    -ms-transform: translate(100px, 0px); 
    transform: translate3d(100px, 0px, 0px); 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.slidein-right.in-view{ 
    opacity: 1; 
    -moz-transform: translate3d(0px, 0px, 0px); 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -ms-transform: translate(0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 

}

источник

2016-12-31 Zach Ellis

Я не хочу быть грамматикой нацистов, но перед доставкой клиенту (если это то, что вы делаете), вы можете изменить «faiulure» на «failure». (Он находится в разделе расчета доллара США за 10 000 000 долларов.) Кроме того, где нежелательные пробелы? Я ничего не заметил. –

У меня все еще есть проблемы с пробелом, но спасибо за указание на орфографическую ошибку. –

не связанные с CSS-анимации, одна вещь, которую вы могли бы сделать, чтобы исправить это, чтобы добавить overfrlow-х: скрытый; к вашему телу.

body{ 
    overflow-x: hidden; 
}

источник

2016-12-31 23:01:17 azs06

Я попытался добавить переполнение: hidden и overflow-x: скрытый для всех классов, которые, по моему мнению, могут понадобиться, но ни один из них не имеет предполагаемого эффекта. Будет ли проблема, если бы у меня было переполнение, установленное в нескольких классах? –

Чтобы устранить проблему, возникшую у вас, добавьте переполнение-x: hidden; на теле должно исправить это, вам не нужно добавлять overflow-x для всех ваших классов, если это не абсолютный элемент, а затем настройка его на тело должна работать. – azs06

Это первое, что я пробовал, и он все еще не работал.Я просто понял, что файлы .css были кэшированы или что-то еще, потому что изменения, которые я делал, не отражались на странице. Добавление переполнения-x: скрытое завершало его исправление. Благодаря! –

Как ваши используют преобразования для анимации элементов и спецификации CSS для преобразования (метод, с помощью которого Animate.css перемещает элементы) указывает, что элементы должны влиять на переполнение браузера и, следовательно, тело переполняется, пока все анимация преобразования завершена.

вы можете добавить overflow:hidden (лучше overflow-x:hidden, поскольку вы трансформируете только в x-направлении) на содержащийся элемент.

Добавить CSS

animation-fix{ 
    overflow-x:hidden; 
}

и добавить класс animation-fix к телу и удалить его на все анимации завершается.

Вы можете сделать это, проверив количество div с .animation-element.in-view. Класс равен числу div с .animation-element классом, который у вас есть в html.

источник

2016-12-31 23:15:03

Я сделал класс анимации и добавил его в тег body, но также и все мои анимационные элементы, но это не влияет на пробел. Я попытался добавить $ element.removeClass ('animation-fix') в том же разделе моего JavaScript, который добавляет класс in-view, но по какой-то причине он не удаляет его. Не совсем уверен, что это вызывает проблему. Я также попытался добавить переполнение: скрытый для всех классов, которые, как мне казалось, понадобятся, и ничего не работает. Любые идеи, почему это так? –

Этот парень здесь всегда ваш друг, когда вы получаете изгоев белые пространства, выходящие по дереву:

overflow: hidden; 

overflow-x: hidden; 
overflow:y: hidden;

Если аномалия непосредственно справа, то, возможно переполнение-х будет парень, вы хотите. Я также рекомендую проверить его в других веб-браузерах, чтобы убедиться, что он полностью разрешен.

Проверьте Chrome, Firefox, Safari и IE или Edge. Просто чтобы получить хороший округленный образец. Проверьте это и на смартфоне. Извините, что мой фон QA, я просто пытаюсь установить бонус-логику, потому что согласованность является ключевой.

Как часть этого, я настоятельно рекомендую нажать клавишу F12 и непосредственно редактировать CSS на странице, потому что это может происходить на другом уровне, чем вы ожидаете.

источник

2016-12-31 23:51:33 agm1984

Нежелательные пробелы, созданные с помощью анимации перехода CSS

ответ

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