只转换单个 div 一次

Question

我想创建一个像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;

}

过渡适用于菜单的所有元素。但是我只想第一次做过渡，然后就没有过渡了。怎么可能？提前致谢。

Answer 1

如果您使用 JavaScript，您可以使用它从某些元素中添加和删除类（此处和此处的说明）。我要做的是将转换信息放在特定的类中：.transitionOn {   /* include everything that should only be there when you want the transition */这样，您可以添加一个onclick 事件以从您不再需要过渡的内容中删除 transitionOn 类。我不确定在这种情况下转换是否会完成，因此我会添加超时以确保在转换发生之前不会删除该类。