zoukankan      html  css  js  c++  java
  • Vue2学习笔记:过渡效果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

  • 相关阅读:
    洛谷P3747 [六省联考2017]相逢是问候
    染色(dye)
    BZOJ1426: 收集邮票
    消息队列RabbitMQ
    CRM
    BBS
    版本控制
    RESTful API
    Luffy
    axios使用
  • 原文地址:https://www.cnblogs.com/zycbloger/p/6429153.html
Copyright © 2011-2022 走看看