添加显示属性时，过渡效果不起作用

Question

• 要求是在“立即兑换”按钮上设置transition效果。 最初“立即兑换”按钮处于隐藏状态，在悬停时会显示带有过渡的“立即兑换”按钮

• 问题是我添加了display: none现在display: none可赎回按钮，将鼠标悬停在其显示的display: block 。

下面是我的代码

 .wpf-demo-3 { background-color: #FFF; display: block; width: 265px; height: 300px; overflow: hidden; position: relative; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .wpf-demo-3:hover .view-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); position: absolute; left: 0px; right: 0px; bottom: -287px; display: block; height: 270px; text-align: center; border-top: 2px none #0066b3; border-right-width: 0px; background-color: hsla(0, 0%, 100%, .3); box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16); transition: all 0.5s; transition-duration : 0.3s; display: block !important; } .wpf-demo-3 .view-caption { background-color: #FFF; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; padding: 10px; height: 15%; display: none !important; } 

 <div class="col-xs-12 col-sm-3 col-md-3 text-center item-spacing" style=" margin: 0px; padding: 0px;" > <div class="item hot-deals-wrapper clearfix item-spacingies " style="height: 300px;"> <div class="wpf-demo-3"> <h5> <strong><a style="color:#000;text-decoration:none" data-bind="text:name,attr:{href:redirectLink}"></a></strong> </h5> <div data-bind="ifnot: mediumImage"> <div class="img-wrapper"> <a data-bind="attr:{href:redirectLink}"><img src="https://d2kbtrec8muwrn.cloudfront.net/assets/web/fnp/fnp/basket/B28.jpg"/></a> </div> </div> <div> <a href="javascript:void(0)" class="news socialwrapper" class="btn text-right"><i class="fa fa-share-alt share-icon socialicons"></i></a> <div style="display:none" class="alert_list"> </div> </div> <a href = "https://www.google.co.in/" class = "view-caption"> <button class="btn btn-default pb-bg-red bottommarginmore redeemNowBtn " style=" width: 128px; margin-top: 25px;">Redeem Now</button> </a> </div> </div> </div> 

Answer 1

您可以尝试此方法，而不是分配属性

CSS代码：

.wpf-demo-3:hover .view-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
left: 0px;
right: 0px;
bottom: -287px;
display: block;
height: 270px;
text-align:center;
border-top: 2px none #0066b3;
border-right-width: 0px;
background-color: hsla(0, 0%, 100%, .3);
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, .16);
transition: all 0.5s;
transition-duration : 0.3s;
opacity: 1;
visibility: visible;
}
.wpf-demo-3 .view-caption {
background-color: #FFF;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
padding: 10px;
height: 15%;
opacity: 0;
visibility: hidden;
}

演示： https : //jsfiddle.net/JentiDabhi/k5c6net2/

Answer 2

在从display:none切换到display:block并进行CSS转换时，请尝试将Javaset setTimeout用作中间设备，并稍加延迟。 过渡不适用于display:none情况。

为此，您需要使用一个悬停事件，而不是悬停CSS选择器。

在CSS中，尝试将.wpf-demo-3:hover .view-caption更改为.view-caption.transition 。 另外，删除display: block; 并display:block !important; 声明。

另外，删除display: none !important; 来自.wpf-demo-3 .view-caption声明。

然后在Javascript中尝试类似的操作（例如，使用jQuery语法以简化操作）：

$('.wpf-demo-3').hover(function(){
  $('.view-caption').show();
  setTimeout(function(){
    $('.view-caption').addClass('transition');
  }, 10);
}, function(){
    $('.view-caption').removeClass('transition');
    setTimeout(function(){
        $('.view-caption').hide();
    }, 510);
});

最后一个悬停功能中的setTimeout设置为510ms，因此它在CSS过渡时间0.5s之后为10ms。