vue 使用过渡动画 内置浏览器 效果不出来，chorme正常，是什么原因

vue 使用过渡动画 内置浏览器 动画效果不出来，chorme正常，是什么原因？

        <style>  
            .bounce-enter-active {  
                animation: bounce-in .5s;  
            }  

            .bounce-leave-active {  
                animation: bounce-out .5s;  
            }  

            @keyframes bounce-in {  
                0% {  
                    transform: scale(0);  
                }  
                50% {  
                    transform: scale(1.5);  
                }  
                100% {  
                    transform: scale(1);  
                }  
            }  

            @keyframes bounce-out {  
                0% {  
                    transform: scale(1);  
                }  
                50% {  
                    transform: scale(1.5);  
                }  
                100% {  
                    transform: scale(0);  
                }  
            }  
        </style>  

        <div id="example-2">  
            <button @click="show = !show">Toggle show</button>  
            <transition name="bounce">  
                <p v-if="show">Look at me!</p>  
            </transition>  
        </div>  

    <script type="text/javascript">  
        new Vue({  
            el: '#example-2',  
            data: {  
                show: true  
            }  
        })  
    </script>