vue的transition的name作用

vue的transition的name作用例如css中记录一下今天在vue的transition中遇到的坑<!DOCTYPE html><html><head><title>Vue中CSS动画原理</title><script type="text/javascript" src="../vue....

『时光荏苒』

5631人浏览 · 2019-08-21 19:06:32

『时光荏苒』 · 2019-08-21 19:06:32 发布

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 来控制是否显示

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^