vue css动画效果旋转_复习之Vue同时使用CSS过渡和CSS动画

CSS过渡和CSS动画的结合使用，如： <style>.v-enter,.v-leave-to {opacity: 0;}.v-enter-active,.v-leave-active {transition: all 7s;...

weixin_39625864

245人浏览 · 2021-01-31 20:37:49

weixin_39625864 · 2021-01-31 20:37:49 发布

CSS过渡和CSS动画的结合使用，如：

 <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 7s;
        }

        .v-enter-to,
        .v-leave {
            opacity: 1;
        }
    </style>

    <div id="app">
        <transition 
            enter-active-class="animate__animated animate__slideInRight v-enter-active"
            leave-active-class="animate__animated animate__slideInUp v-leave-active">
            <a-cmp v-if="type === 'a-cmp'">a-cmp</a-cmp>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'a-cmp'
            },
            methods: {
                handleClick() {
                    this.type = this.type === 'a-cmp' ? 'b-cmp' : 'a-cmp';
                }
            },
            components: {
                'a-cmp': {
                    template: `
                    <div> a-cmp </div>
                    `
                }
            }
        })
    </script>

因为CSS过渡和CSS动画的结束时间不一致，所以Vue默认使用两者更长的为结束时刻。但是，我们也可以手动设置，到底要按照哪个时间来执行。

可使用 type 属性，来声明需要 Vue 监听的类型，type值可为 animation 或 transition 。如：

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 7s;
        }

        .v-enter-to,
        .v-leave {
            opacity: 1;
        }
    </style>

    <div id="app">
        <transition 
            type="animation"
            enter-active-class="animate__animated animate__slideInRight v-enter-active"
            leave-active-class="animate__animated animate__slideInUp v-leave-active">
            <a-cmp v-if="type === 'a-cmp'">a-cmp</a-cmp>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'a-cmp'
            },
            methods: {
                handleClick() {
                    this.type = this.type === 'a-cmp' ? 'b-cmp' : 'a-cmp';
                }
            },
            components: {
                'a-cmp': {
                    template: `
                    <div> a-cmp </div>
                    `
                }
            }
        })
    </script>

当不设置type时，默认会取 transitioned 和 animationed 两者更长的为结束时刻。

Vue可以设置显性的过渡时间

在一些情况下，Vue可以自动得出过渡效果的完成时机，从而对dom进行处理。

但是有些时候，我们会设置一系列的过渡效果，例如嵌套元素也有过渡动效，其过渡效果的时间长于父元素。此时我们可以设置duration属性，定制一个显性的过渡持续时间（以毫秒记）。如：

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 7s;
        }

        .v-enter-to,
        .v-leave {
            opacity: 1;
        }
    </style>

    <div id="app">
        <transition 
            :duration="1000"
            enter-active-class="animate__animated animate__slideInRight v-enter-active"
            leave-active-class="animate__animated animate__slideInUp v-leave-active">
            <a-cmp v-if="type === 'a-cmp'">a-cmp</a-cmp>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'a-cmp'
            },
            methods: {
                handleClick() {
                    this.type = this.type === 'a-cmp' ? 'b-cmp' : 'a-cmp';
                }
            },
            components: {
                'a-cmp': {
                    template: `
                    <div> a-cmp </div>
                    `
                }
            }
        })
    </script>

Vue可以设置初始渲染的过渡

可以通过 ``appear`` attribute 设置节点在初始渲染的过渡。如：

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 7s;
        }

        .v-enter-to,
        .v-leave {
            opacity: 1;
        }
    </style>

    <div id="app">
        <transition 
            appear
            enter-active-class="animate__animated animate__slideInRight v-enter-active"
            leave-active-class="animate__animated animate__slideInUp v-leave-active">
            <a-cmp v-if="type === 'a-cmp'">a-cmp</a-cmp>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'a-cmp'
            },
            methods: {
                handleClick() {
                    this.type = this.type === 'a-cmp' ? 'b-cmp' : 'a-cmp';
                }
            },
            components: {
                'a-cmp': {
                    template: `
                    <div> a-cmp </div>
                    `
                }
            }
        })
    </script>

和进入/离开过渡一样，appear同样也可以自定义 CSS 类名。如：
- appear-class="appear-enter"
- appear-active-class="appear-enter-active"
- appear-to-class="appear-enter-to"

    <div id="app">
        <transition 
            appear
            appear-active-class="animate__animated animate__backOutRight"
            enter-active-class="animate__animated animate__slideInRight v-enter-active"
            leave-active-class="animate__animated animate__slideInUp v-leave-active">
            <a-cmp v-if="type === 'a-cmp'">a-cmp</a-cmp>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                type: 'a-cmp'
            },
            methods: {
                handleClick() {
                    this.type = this.type === 'a-cmp' ? 'b-cmp' : 'a-cmp';
                }
            },
            components: {
                'a-cmp': {
                    template: `
                    <div> a-cmp </div>
                    `
                }
            }
        })
    </script>

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}$/, //不连续的两位字母// /^