Vue

HTML

<div id="app">
    <div class="dartSpoiler">
        <div class="dartSpoiler__item">
            <div class="dartSpoiler__ask">
                <div class="dartSpoiler__ask-title">Спойлер#1</div>
                <div class="dartSpoiler__ask-switch" @click="show = !show"></div>
            </div>

            <transition name="dartSpoilerSlide">
                <div class="dartSpoiler__answer-inner" v-show="show">
                    <div class="dartSpoiler__answer-img">
                        <img src="https://sun9-49.userapi.com/c633324/v633324767/32239/QJQs6yQU9Rw.jpg?ava=1" alt="3" />
                    </div>
                    <div class="dartSpoiler__answer-text">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in</p>
                    </div>
                </div>
            </transition>
        </div>
</div>

SCSS

.dartSpoiler {
    max-width: 830px;
    margin: 0 auto;
    font-family: Raleway;
    padding: 15px;
    overflow: hidden;
    z-index: 2;
    position: relative;
    &__item {
        margin: 0 0 20px 0;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    &__ask {
        display: flex;
        align-items: center;
        padding: 20px 25px;
        width: 100%;
        border-radius: 5px;
        background-color: #ffffff;
        z-index: 3;
        position: relative;
        justify-content: space-between;
        box-sizing: border-box;
    }
    &__ask-title {
        color: #061e37;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
    }
    &__ask-switch {
        /* margin: 0 0 0 auto; */
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #79849b;
        cursor: pointer;
    }

    &__answer {
        overflow: hidden;
    }
    &__answer-inner {
        display: flex;
        padding: 0 25px 25px 25px;
        border-radius: 5px;
        background-color: #ffffff;
    }
    &__answer-img {
        margin: 0 25px 0 0;
    }
    &__answer-text {
        color: #061e37;
        font-size: 15px;
        font-weight: 400;
        line-height: 25px;
        letter-spacing: 0.45px;
        text-align: start;
        & p:first-child {
            margin: 0 0 35px 0;
        }
    }
}

//////////////////////////////////////
.dartSpoilerSlide-enter {
}
.dartSpoilerSlide-enter-active {
    animation: slideIn 0.5s;
}
.dartSpoilerSlide-enter-to {
}
.dartSpoilerSlide-leave {
}
.dartSpoilerSlide-leave-active {
    animation: slideOut 0.5s;
}
.dartSpoilerSlide-leave-to {
}
@keyframes slideIn {
    from {
        transform: translateY(-2000px);
    }
    to {
        transform: translateY(0px);
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0px);
    }
    to {
       ...

Vue

new Vue({
  el: "#app",
  data: {
		show: true
  }
})