内容的淡入淡出

现在这个过渡不太漂亮，但是如何在悬停后将此滑道向上滑动，并在悬停后向下滑动比现在好？
下面是该代码 JSFiddle（太多的代码）内容的淡入淡出

.employee-box { 
border:2px solid #F9BA16; 
background:#fff; 
height:500px; 
width:350px; 
mediamax-width:480px {; 
max-width:250px; 
margin:0 auto 35px; 
} 

hr { 
width:100%; 
border-color:#fff; 
border-width:6px; 
margin:0 auto; 
} 

img { 
max-height:430px; 
padding:40px 0 20px; 
} 

.employee-more { 
position:relative; 
-webkit-transition:all .4s ease-out; 
-o-transition:all .4s ease-out; 
transition:all .4s ease-out; 
imgposition:relative; 
background:#fff; 
border-radius:50%; 
width:39px; 
height:39px; 
top:-20px; 
left:43%; 
padding:10px; 
} 

h1 { 
text-align:center; 
font-size:28px; 
color:#fff; 
padding-bottom:10px; 
margin:-15px 0 0; 
} 

.details { 
display:none; 
text-align:center; 
details-addressfont-size:20px; 
font-style:italic; 
} 

i { 
color:#fff; 
border-radius:50%; 
border:3px solid #fff; 
width:40px; 
height:40px; 
font-size:22px; 
fa-envelopepadding:6px 5px; 
} 

&.fa-phone { 
padding:8px 0; 
} 

.details-contact { 
font-size:30px; 
color:#fff; 
font-style:italic; 
} 

.details-desc { 
font-style:italic; 
font-size:14px; 
padding:5px 10px; 
} 

.employee-rank { 
position:absolute; 
padding-top:40px; 
bottom:-33px; 
left:25%; 
ppadding-bottom:32px; 
text-align:center; 
font-size:16px; 
} 

&:hover { 
employee-moretop:-438px; 
background:rgba(#F9BA16,.9); 
height:465px; 
transition:all .4s ease-in; 
detailsdisplay:block; 
}

来源

2016-04-03 Vertisan

*“更好”*是什么意思？如果你想要一个不同的缓动函数，我建议你看立方贝塞尔计算。 –

我想改善目前的效果，让他在显示和隐藏时更平滑。 – Vertisan

我们无法决定对您来说更顺畅吗......这完全是主观的。正如我所说，审查立方贝塞尔宽松。 –

检查这个我希望你喜欢它的演示：https://jsfiddle.net/72bd2zhb/2/

$PrimaryColor: #F9BA16; 
section.bok-employees { 
    .bok-employees-content { 
    .bok-employees-boxes { 
     .employee-box { 
     border: 2px solid $PrimaryColor; 
     background: #fff; 
     position:relative; 
     height: 500px; 
     width: 350px; 
     margin: 0 auto 35px; 
     overflow:hidden; 
     @media (max-width: 480px) { 
      max-width: 250px; 
     } 
     hr { 
      border-width: 6px; 
      border-color: $PrimaryColor; 
      width: 112px; 
      margin: 0 auto; 
     } 
     img { 
      padding: 40px 0 20px; 
      max-height: 430px; 
     } 
     .employee-more { 
      background: $PrimaryColor; 
      position: relative; 
      top: -40px; 
      -webkit-transition: all 0.5s ease-out; 
      -o-transition: all 0.5s ease-out; 
      transition: all 0.5s ease-out; 
      img { 
      position: relative; 
      background: #fff; 
      border-radius: 50%; 
      padding: 10px; 
      width: 39px; 
      height: 39px; 
      top: -20px; 
      left: 43%; //110px; 
      @include rotateAnimation(); 
      } 
      h1 { 
      margin: 0; 
      text-align: center; 
      font-size: 28px; 
      color: #fff; 
      margin-top: -15px; 
      padding-bottom: 10px; 
      @include BoldItalic(); 
      } 
      .details { 
      opacity: 0; 
      text-align: center; 
      -webkit-transition: all 0.5s ease-out; 
      -o-transition: all 0.5s ease-out; 
      transition: all 0.5s ease-out; 
      .details-address { 
       font-size: 20px; 
       font-style: italic; 
      } 
      i { 
       color: #fff; 
       border-radius: 50%; 
       border: 3px solid #fff; 
       width: 40px; 
       height: 40px; 
       font-size: 22px; 
       &.fa-envelope { 
       padding: 6px 5px; 
       } 
       &.fa-phone { 
       padding: 8px 0; 
       } 
      } 
      .details-contact { 
       font-size: 30px; 
       color: #fff; 
       font-style: italic; 
      } 
      hr { 
       border-color: #fff; 
       width: 100% 
      } 
      .details-desc { 
       font-style: italic; 
       font-size: 14px; 
       padding: 5px 10px; 
      } 
      } 
     } 
     .employee-rank { 
      position: absolute; 
      //padding-top: 40px; 
      bottom: -33px; 
      left: 0; 
      right:0; 
      -webkit-transition: all 0.5s ease-out; 
       -o-transition: all 0.5s ease-out; 
       transition: all 0.5s ease-out; 
      p { 
      padding-bottom: 32px; 
      text-align: center; 
      font-size: 16px; 
      } 
     } 
     &:hover { 
      .employee-more { 
      top: -405px; 
      background: rgba($PrimaryColor, .9); 
      height: 465px; 
      -webkit-transition: all 0.5s ease-in; 
      -o-transition: all 0.5s ease-in; 
      transition: all 0.5s ease-in; 
      .details { 
       opacity: 1; 
       -webkit-transition: all 0.5s ease-out; 
       -o-transition: all 0.5s ease-out; 
       transition: all 0.5s ease-out; 

      } 
      } 
      .employee-rank { 
       bottom:-60px; 
       -webkit-transition: all 0.5s ease-out; 
        -o-transition: all 0.5s ease-out; 
        transition: all 0.5s ease-out; 
       } 
     } 
     } 
    } 
    } 
}

来源

2016-04-03 16:50:36

这就是我所寻找的，谢谢！ – Vertisan

@Vertisan欢迎你的朋友 –

可以使用translateY为.employee-more，而不是top

来源

2016-04-03 16:49:50 Nora

内容的淡入淡出

回答

相关问题