是否可以通过transition来替代@keyframes？

Question

需求是这样的：
我想要做一个从底部往上弹出的弹窗（类似淘宝购物时选择物品规格的效果

然后呢，我目前可以通过@keyframes去实现，但是呢，@keyframes的值是写死的，我期望的是动态的，所以我开始接触translation

使用@keyframes实现

.slideshow_bottom-enter-active {
        animation: bounce_in .5s;
    }
@keyframes bounce_in {
   0%{height: 0%;}
   100%{height:80%;}
}

我希望动态的值其实就是 100%{height:80%}中的80%

奈何本人技术功底不扎实，translation连一个透明转变的效果都没有（有退没进）
HTMl代码

<transition name="backshow"
            @enter="backshow_Enter"
            @after-leave="backshow_Leave"
    >
    <div v-show="IFshow" style="z-index:100;height:100vw">
        .....
    </div>
</tansition>

CSS代码

 .backshow-enter-active,  .backshow-leave-active{
    transition: opacity  1s ease-out;
}
 .backshow-enter , .backshow-leave-to{
    opacity: 0;
}

最后我用的是Vue.js...如果有哪位大佬知道怎么把 '@keyframes' 写进data或者说通过 new 生成的话期望告知一下。或者使用translation抑或是其他（不太想用第三方库...但是要用也可以）实现也可以。

完整CSS代码

  .backshow-enter-active,  .backshow-leave-active{
        transition: opacity  1s ease-out;
    }
     .backshow-enter , .backshow-leave-to{
        opacity: 0;
    }
/* Animation-bottom */
    .slideshow_bottom-enter-active {
        /* animation: bounce_in .5s; */
        transition-property: all .5s;
        -webkit-transition-property:all .5s;
    }
    .slideshow_bottom-leave-active {
        /* animation: bounce_in .2s reverse; */
        transition: all .2s ;
        -webkit-transition:all .2s;
    }
    .slideshow_bottom-enter,  .slideshow_bottom-leave-to{
        height: 30%;
    }
    /* @keyframes bounce_in {
       0%{height: 0%;}
       100%{height:80%;}
    } */

**补充一下：
动画是通过事件触发的...网上教程那些的通过伪类实现的我也看过，转成我这种类型的知道怎么写也可以交流一下**

Answer 1

额。。。我用JQ很容易实现slideUp

Answer 2

直接用transform: translate做这个效果我觉得更简单