Как добавить анимацию перехода с CSS
Я кратко объясню, как работает этот пример. Так что, возможно, вы сможете лучше понять или продвинуться в своем обучении.
Есть два способа анимации с использованием css, со свойством Animate или свойством Transition. Я использую свойство перехода в этом примере, потому что эта анимация проста, а анимация перехода лучше для производительности.
Переход: Установите свойство, которое вы хотите изменить, продолжительность и Кривая Безье (время анимации).
Комментарии в коде более подробно объясняют, для чего предназначена каждая часть кода.
function SetActiveDiv(ID, bt) {
var element = document.getElementById(ID);
if (element) {
element.classList.toggle("slide") // By toggling the class,
return true //css attributes change that triggers the animation to start
}
return console.log(ID, " not found!");
}
#sideExpand {
display:flex;
width: 100%;
height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
border-radius: 35px;
background-color: rgba(31, 45, 65, 0.125);
transition: transform 1s ease-in; // Transition set which property will be animated and how
transform: translateX(100%); // this is the initial position of the element
Примечание: это означает, что для начала элемент будет на 100% смещен. В правую сторону, из-за потока документа.
z-index: -1; // z-index determines how elements stack up on the z axis, lower values to to the bottom of the stack
}
#sideExpand.slide{ // We have to use the Id along side the class do to specificity
transform: translateX(0%); // This is the position that will be achieved
}
.filter-container{
padding: .3rem;
display: flex;
justify-content: flex-end;
overflow: hidden; // Hides the overflowing element, at the moment the filter is 100%
} // out of position that would extent the view to the right significantly.
#filterToggle{ // I advise to never use inline style, try to add them to your style-sheets
background: white; // fore, the use of inline styles and the !important keyword
font-size: 150%; // has extremely high specificity values that are hard to overwrite
border: .2rem solid #c1c1c1;
}
#filterToggle::after{ // Add a cover to hide the filters
position:absolute;
content: "";
height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
width: 4rem;
background:white;
right: -2rem ;
z-index: -1;
}
Если вы заметите какие-либо несоответствия или у вас есть предложения по улучшению моих ответов, пожалуйста, дайте мне знать. Спасибо