如何在细节标签的关闭事件上添加CSS转换？

Question

阅读这两个问题后：

• How To Add CSS3 Transition With HTML5 details/summary tag reveal?
• How to make <'details'> drop down on mouse hover

我对你有一个新的！

问题

我想在关闭<details>标签的事件的动画。我认为只是恢复开放的动画会做这项工作，但不幸的是，没有。

$(function() { 
 
    $('details').on('mouseover', function() { 
 
    $(this).attr('open', true); 
 
    }).on('mouseout', function() { 
 
    $(this).attr('open', false); 
 
    }).on('click', function(e) { 
 
    e.preventDefault(); 
 
    }) 
 
});

details[open] SUMMARY~* { 
 
    animation: sweepin .5s ease-in-out; 
 
} 
 

 
details[close] SUMMARY~* { 
 
    animation: sweepout .5s ease-in-out; 
 
} 
 

 
@keyframes sweepin { 
 
    0% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    margin-left: 0px 
 
    } 
 
} 
 

 
@keyframes sweepout { 
 
    0% { 
 
    opacity: 1; 
 
    margin-left: 0px 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<details> 
 
    <summary>Here my little summary</summary> 
 
    <p>... Do you want more details?</p> 
 
    <p>Here have some details!</p> 
 
</details>

问题

你是否认为这是可能的吗？

Answer 1

您可以替换切换.className获取details[close]选择器;在mouseover事件是否元素不.open，如果true，设置属性为.open = true在mouseout事件添加.className，使用.one()animationend活动，删除.className，并在事件处理程序中设置.open到false。

$(function() { 
 
    $("details").on({ 
 
    mouseover: function() { 
 
     if (!this.open && !$(this).is(".close")) 
 
     $(this).prop("open", true) 
 
     .one("animationend", function() { 
 
      $(this).addClass("animationDone") 
 
     }) 
 
    }, 
 
    mouseout: function _close() { 
 
     if (!$(this).is(".close") && $(this).is(".animationDone")) 
 
     $(this).addClass("close") 
 
     .one("animationend", function() { 
 
      $(this).prop("open", false) 
 
      .removeClass("close animationDone") 
 
     }) 
 
    }, 
 
    click: function(e) { 
 
     e.preventDefault(); 
 
    } 
 
    }) 
 
});

details[open] SUMMARY~* { 
 
    animation: sweepin .5s ease-in-out; 
 
} 
 

 
details.close SUMMARY~* { 
 
    animation: sweepout .5s ease-in-out; 
 
} 
 

 
@keyframes sweepin { 
 
    0% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    margin-left: 0px 
 
    } 
 
} 
 

 
@keyframes sweepout { 
 
    0% { 
 
    opacity: 1; 
 
    margin-left: 0px 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<details> 
 
    <summary>Here my little summary</summary> 
 
    <p>... Do you want more details?</p> 
 
    <p>Here have some details!</p> 
 
</details>

Answer 2

您可以使用动画填充模式属性，以保持div的原始位置的动画完成后。在鼠标悬停和鼠标悬停事件上，您可以添加和删除打开和关闭属性。

见下面的代码片段

$(function() { 
 
    $('details').on('mouseover', function() { 
 
    $(this).attr('open', true); 
 
    $(this).removeAttr('close', false); 
 

 

 
    }).on('mouseout', function() { 
 
    
 
     $(this).attr('open', false); 
 
      $(this).removeAttr('open', false); 
 
      $(this).attr('close', true); 
 
    
 

 

 
    }).on('click', function(e) { 
 
    e.preventDefault(); 
 
    }) 
 
});

details[open] SUMMARY~* { 
 
    animation: sweepin .5s ease-in-out; 
 
    animation-fill-mode:forwards; 
 
} 
 

 
details[close] SUMMARY~* { 
 
    animation: sweepout .5s ease-in-out; 
 
    animation-fill-mode:forwards; 
 
} 
 

 
@keyframes sweepin { 
 
    0% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    margin-left: 0px 
 
    } 
 
} 
 

 
@keyframes sweepout { 
 
    0% { 
 
    opacity: 1; 
 
    margin-left: 0px; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    margin-left: -10px 
 
    } 
 
} 
 
details{ 
 
border:solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br><br><br><br> 
 
<details> 
 
    <summary>Here my little summary</summary> 
 
    <p>... Do you want more details?</p> 
 
    <p>Here have some details!</p> 
 
</details>

Answer 3

对不起变革的逻辑，但我发现这个快和流体。

$(function() { 
 

 
    $('#summary').on('mouseover', function() { 
 
    
 
    $('#triangleDown').fadeIn(0); 
 
    $('#triangle').fadeOut(0); 
 
    $('#content').addClass("open"); 
 
    
 
    }).on('mouseout', function() { 
 
    
 
    $('#triangleDown').fadeOut(0); 
 
    $('#triangle').fadeIn(0); 
 
    $('#content').removeClass("open"); 
 
    
 
    }) 
 
    
 
});

#triangleDown{ 
 
    display:none; 
 
} 
 

 
span{ 
 
    font-size: 12px; 
 
} 
 

 
#content{ 
 
    
 
    opacity:0; 
 
    margin-left: 0px; 
 
    -webkit-transition:all 1s; 
 
    transition:all 1s; 
 
    
 
} 
 

 
#content.open{ 
 
    opacity: 1; 
 
    margin-left: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p id="summary"><span id="triangle">► </span><span id="triangleDown">▼ </span>Here my little summary</p> 
 
    <div id="content"> 
 
    <p>... Do you want more details?</p> 
 
    <p>Here have some details!</p> 
 
    </div> 
 
    
 
</div>