vue的transition的name作用

例如
在这里插入图片描述
css中
在这里插入图片描述
记录一下今天在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 来控制是否显示

Logo

前往低代码交流专区

更多推荐