Question

要求将transition效果置于“立即兑换”按钮。最初立即兑换按钮是隐藏的，在悬停时它将显示带有转换的现在兑换按钮
问题是我已添加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

使用CSS转换从display:none切换到display:block时，请尝试使用带有小延迟的Javascript 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。

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

2 个答案: