SOURCE

document.querySelector('button').onclick = function(){
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')
    
    console.log(inner.classList)
    outer.classList.add('outer-active')
    inner.classList.add('inner-active')
     console.log(inner.classList)
}

<div class="outer">
    <div class="inner"></div>
</div>


<button>抛物线效果</button>

.outer{
    transition:all 1.5s linear;
}
.inner{
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color:red;
    transition:all 1.5s cubic-bezier(.54, .11, .95, .68);
}

.outer-active{
    transform: translateX(500px)
}

.inner-active{
    transform:translateY(500px) scale(0);
}