vue中transition实现div缓慢显示隐藏动画

vue中显示或者隐藏DOM时，提供多种不同的方式来实现动画效果，可以配合使用css3动画，也可以使用第三方动画库，如animate.css。这里我们使用vue提供的 transition 组件。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <script type="text/javascript" src="js/vue.min.js"></script>
        <style>
            .popBackground{
                width: 300px;
                height: 200px;
                background: rgba(0,0,0,0.4);
                color: #01FEFE;
            }
          .fade-enter-active, .fade-leave-active {
            transition: opacity .8s;
          }
          .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
          }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="demo">
              <button v-on:click="show = !show">
                Toggle
              </button>
              <transition name="fade">
                <div v-show="show" class="popBackground">
                        hello
                    </div>
              </transition>
            </div>
        </div>
        
        <script>
            var box = new Vue({
                el: '#box',
                data () {
                    return {
                        show: true
                    }
                }
            })
        </script>
    </body>
</html>

vue中transition实现div缓慢显示隐藏动画

瑞瑞_

引用和评论

后端返回数据量过多页面卡死问题处理

前端开发工具

开发插件集合

Vue.js-方法与事件

2024最全ECharts 实战大全（速记版+资源）

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！