Javascript 等效于带有过渡的 jQuery .show(200)？答案

【问题标题】：Javascript equivalent to jQuery .show(200) with transition?Javascript 等效于带有过渡的 jQuery .show(200)？
【发布时间】：2020-10-23 05:55:21
【问题描述】：

我知道 $(".box").show(); 是 Jquery 与 JS 中的 document.querySelector(".box").style.display = "block"; 相同。但是，当.show(300) 上有一个过渡淡入淡出时，我似乎无法在 JS 中复制它。在'mouseenter' 上，弹出一个小工具提示框。目前我有：

let svgTarget = document.querySelector('svg #target' + newId);
svgTarget.style.fill = 'rgba(0,0,0,0.0)';

svgTarget.addEventListener('mouseenter', function (e) {
 d3.select('svg #tooltip' + newId)
  .transition()
  .duration(5000)
  .style("display", "inline");
 inOutBehavior(e, hoverState);
},)

'mouseenter' 功能在没有平滑过渡的情况下工作，它是瞬时的。我正在使用 D3 来实现过渡，但没有运气。我也尝试过使用带有 D3 的事件侦听器，但这也不起作用。有没有我没有看到的 vanilla JS 或 D3 解决方案？谢谢！

【问题讨论】：

您不能简单地应用一个 CSS 样式并将其连接到 an animation 吗？为什么要说服 javascript 褪色？
是的，你是对的，只是想知道是否有办法用 JS 来做到这一点。另外，你能告诉我一个应用 CSS 样式并将其连接到动画的示例吗？
@JoeSpinelli 不想变得粗鲁，但你试过吗？ StackOverflow 不是寻求建议的地方。见stackoverflow.com/questions/29017379/…
@JuanMendes 我还没有使用过 css 动画，所以我一直在苦苦挣扎。对不起，我会做更多的研究。感谢资源！

标签： javascript d3.js css-transitions transition show

【解决方案1】：

您是否尝试过设置不透明度而不是显示？我尝试了以下方法，它似乎以您描述的方式消失了。

tooltip.transition().duration(5000).style("opacity", 0.9);

如果这不起作用，或者如果您有任何问题，请告诉我！

【讨论】：

【解决方案2】：

如果你真的想在没有 D3 的情况下这样做，那么你可以使用 transition-delay CSS 选项。

transition-delay: 200ms;
transition: opacity 1s ease;

这是一个例子..https://codepen.io/soichih/pen/LYGeorr

您不能为display 状态设置动画。

【讨论】：