css - 显示隐藏内容的过渡动画

Question

我需要做类似 Studio Up 的事情在第三张幻灯片上，要在单击按钮时显示隐藏的内容，我需要做同样的效果，但我不知道怎么做。有人能帮助我吗？我在互联网上搜索过，但一无所获。

这是我的 HTML，我不知道如何设置 CSS。

<div class="services">
    <h2>Social Media</h2>
    <div class="service-icon convers"></div>
    <p>La comunicazione si è evoluta in conversazione. Siamo nati con questo        cambiamento.</p>
    <p class="answer">Inventiamo strategie e pensiamo comportamenti buoni (che valgono sempre).<br>
    Studiamo ogni giorno nuovi strumenti e servizi</p>
    <a href="#" class="button radius button-detail">e quindi?</a> 
    <a href="#" class="button radius alert button-back">indietro</a>
</div>

非常感谢。

Answer 1

当您点击 .button-detail 时，类 .answered 将被添加到 .services，点击 .button -back 并且相同的类将被删除

$('.button-detail').on('click',function(){
  $(this).parent().addClass('answered');
});
$('.button-back').on('click',function(){
  $(this).parent().removeClass('answered');
});

然后 css 就可以了:

.services.answered .button-back {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: 10001
}

.services.answered .button-detail {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.services.answered .answer {
    height: 12.5rem;
    padding-top: 0.625rem;
    opacity: 1
}

.services.answered p {
    height: 0;
    overflow: hidden;
    margin: 0;
    opacity: 0
}

.services.answered .service-icon {
    height: 5rem;
    margin-top: 0.625rem
}

.services {
    text-align: center;
    overflow: hidden;
    position: relative;
    padding-bottom: 55px;
    color: #fff;
    height: 360px
}



.services h2 {
    font-size: 1.3125rem;
    margin-top: 1rem
}


.services p {
    margin: 0.625rem 0 0;
    font-size: 16px;
    font-weight: 100;
    line-height: 1.1;
    letter-spacing: 0.07rem;
    height: 4.25rem;
    font-family: "bariol-thin",helvetica,arial,sans-serif
}


.services .answer {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 16px;
    padding: 0.75rem 0.5rem 0;
    line-height: 19px;
    opacity: 0
}

.services .button {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: none!important;
    font-family: "lato-regular",helvetica,arial,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.8125rem 0
}

.services .button:hover {
    background-color: #FF6F5C
}

.services .button-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    background-color: #c2371f;
    border-color: transparent
}

.services .button-back:hover {
    background-color: #862f26
}

.services .button-detail {
    z-index: 10000
}

.services p,.services .answer, .services .button, .services .service-icon {
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out
}