Vue2学习笔记:过渡效果css

最新推荐文章于 2025-09-10 14:53:18 发布

转载最新推荐文章于 2025-09-10 14:53:18 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zycbloger/p/6429153.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue的transition封装组件为元素和组件添加进入/离开过渡效果。通过一个示例展示了如何利用CSS实现淡入淡出的动画，并提供源代码供读者参考。

过渡效果

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="vue.js"></script>
    <style type="text/css">
        .fade-enter-active, .fade-leave-active {
          transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
           opacity: 0
        }
    </style>
</head>
<body> 
    <div id="box">
        <input type="button" value="按钮" @click="toggle">

        <transition name="fade">
            <div id="div1" v-if="isShow" transiton="fade">11111</div>
        </transition>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#box',
            data:{
                isShow:false
            },
            methods:{
                toggle:function(){
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
</body>
</html>

一开始不显示，点击后显示有一个css的过渡方式

官方：https://vuefe.cn/v2/guide/transitions.htm

转载于:https://www.cnblogs.com/zycbloger/p/6429153.html