不透明度转换导致动画中断

Question

我有一个元素列表，当它们悬停时显示一组控件以删除它们。控件转换为不透明度值。

.duplicate-controls {
    position: relative;
    float: left;
    opacity: 0;
    transition: opacity linear 0.7s; }

.duplicate-group:hover .duplicate-controls {
    opacity: 1;
    transition: opacity linear 0.7s; }

当我为内容制作动画时，它会以刺耳的方式跳过或中断动画。如果我删除不透明度过渡，则无法重现该问题。

请参阅以下gif，以直观展示我正在谈论的内容。

这是打断了。 http://gfycat.com/IncomparableBlaringAsianporcupine

这应该是动画的方式。 http://gfycat.com/CheapMajesticBluebottlejellyfish

Answer 1

从

中删除过渡属性

.duplicate-group:hover .duplicate-controls{}