关于vue.js:vue中transition实现div缓慢显示隐藏动画

42次阅读

共计 875 个字符，预计需要花费 3 分钟才能阅读完成。

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>

正文完