鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ Vue Transition官方示例的一個問題，為什么不能夠添加Opacity:

Vue Transition官方示例的一個問題，為什么不能夠添加Opacity: 1?

為了方便理解，改造了例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>opacity and transformx</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .bounce-leave-active {
            opacity: 1;
            transition: opacity 1s;
        }

        .bounce-leave-to {
            opacity: 0;
        }

        .bounce-enter {
            opacity: 0;
            
        }

        .bounce-enter-active {
            opacity: 1;
            transition: opacity 1s;
        }
        

    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">toggle</button>
        <transition name="bounce">
            <p v-show="isShow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>
</body>
<script>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            isShow: true
        }
    }
})
</script>
</html>

想法很簡單，動畫是從opacity:0 到 1。那么就添加了opacity: 1; 或者opacity: 0;
.bounce-leave-active 之中能夠達(dá)到預(yù)期，但是 .bounce-enter-active 卻不能夠達(dá)到預(yù)期的結(jié)果。transition就不是從一個狀態(tài)變化成為另一個狀態(tài)么？為什么添加了其中一個臨界的狀態(tài)反而不能夠達(dá)到預(yù)期呢？如果不添加opacity: 1; 那么怎么知道我希望最終動畫的效果呢？Any suggestion will be helpful， thanks！

回答
編輯回答
舊時(shí)光

可以引入animate.css動畫庫，這里有一篇文章vue實(shí)現(xiàn)動畫效果

2017年4月23日 21:29