如何制作过渡效果

Question

我需要transition效果的帮助。 我有代码块，我想添加悬停transition效果。 我该怎么做？

 .mockup img { cursor: pointer; } .mockup img:last-child { display: none; } .mockup:hover img:first-child { display: none; } .mockup:hover img:last-child { display: inline-block; }

 <div class="row"> <div class="col-lg-8 mx-auto mockup"> <img src="http://lorempixel.com/output/animals-qc-640-480-9.jpg"> <img src="http://lorempixel.com/output/animals-qc-640-480-7.jpg"> </div> </div>

Answer 1

不幸的是，您无法将过渡添加到显示属性，但您可以将其替换为不透明度或可见性

所以你的代码可以替换为：

.mockup img {
    cursor: pointer;
    transition: all 0.3s ease;
}

.mockup img:last-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:first-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:last-child {
    opacity: 1;
    visibility: visible;
}