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，则可以使用它来添加和删除某些元素（指令here和here）中的类。

我要做的是将转换信息放在特定的类中：

.transitionOn {
  /* include everything that should only be there when you want the transition */
}

这样，您可以添加onclick event来从不再希望进行过渡的内容中删除transitionOn类。我不确定这种情况下转换是否会完成，所以我将添加一个timeout以确保在转换发生之前未删除该类。

转换一个div仅一次

1 个答案: