我想做一个像https://www.amazon.in这样的垂直分类.我制作了垂直菜单,它正在处理过渡。但问题是,我只想在单击类别时进行一次转换。然后该类别的所有元素将打开,没有任何过渡。
#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_info_part {
/* width: 75%; */
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: rgba(246, 212, 160, .9);
/* transform: translateX(-100%); */
/* opacity: 0; */
visibility: hidden;
transition: all 0.5s;
transition-duration: 0.5s;
z-index: -1;
left: 25%;
overflow: hidden;
width: 0;
}
#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_left_list > ul > li:hover .category_info_part{
display: block;
/* transform: translateX(0%); */
/* opacity: 1; */
visibility: visible;
overflow: hidden;
width: 863px;
}
过渡作用于菜单的所有元素。但是我只想第一次做transition,然后就没有transition了。怎么可能?提前致谢。
最佳答案
如果您使用的是 JavaScript,则可以使用它在某些元素中添加和删除类(说明 here 和 here)。
我要做的是将转换信息放在特定的类中:
.transitionOn {
/* include everything that should only be there when you want the transition */
}
这样,您可以添加 onclick event从您不再希望进行过渡的内容中删除 transitionOn 类。我不确定在这种情况下转换是否会完成,所以我会添加一个 timeout以确保在转换发生之前不会删除该类。
关于javascript - 仅过渡单个 div 一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56512963/