內容的淡入淡出

現在這個過渡不太漂亮，但是如何在懸停後將此滑道向上滑動，並在懸停後向下滑動比現在好？
下面是該代碼 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

內容的淡入淡出

回答

相關問題