vue的transition的name作用

记录一下今天在vue的transition中遇到的坑

<!DOCTYPE html>
<html>
<head>
    <title>Vue中CSS动画原理</title>
    <script type="text/javascript" src="../vue.min.js"></script>
    <!-- 定义动画样式 -->
    <style type="text/css">
        .v-enter{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 动画 -->
        <transition name="myfade">
        <!-- name属性的值作为fade-enter fade-enter-active等开头的名字 -->
            <div v-if="show">hello world</div>    
        </transition>
        
        <button @click="change">切换</button>
    </div>

    <script type="text/javascript">
        
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                change: function () {
                    this.show = !this.show
                }
            }
        });
    </script>
</body>
</html>

被告知 transition 的 name 属性是可以自己随意设置的，于是给了 myfade，结果发现没有效果。

后来研究了下发现，这个 name 的值是用来替换 v-enter 的 v

于是修改成

　　<style type="text/css">
        .myfade-enter{
            opacity: 0;
        }
        .myfade-enter-active{
            transition: opacity 3s;
        }
    </style>

就OK了~

另注：transition 只有 name 这一个属性，且只有一个子元素，这个子元素需要 v-if 或 v-show 来控制是否显示。

vue的transition的name作用

相关推荐