12/03 java script hooks.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03</title>
    <script src="vue.js"></script>
    <style>
    /* 必需 */

    .expand-transition {
        transition: all 4.3s ease;
        /* 所有设定，0.3秒*/
        height: 30px;
        padding: 10px;
        color: #000000;
        background-color: #eee;
        /* 背景 灰色 */
        overflow: hidden;
    }
    /* .expand-enter 定义进入的开始状态 */
    /* .expand-leave 定义离开的结束状态 */

    .expand-enter,
    .expand-leave {
        height: 0;
        padding: 0 10px;
        opacity: 0;
        /* 透明度 */
    }
    /* 必需 */

    .fade-transition {
        opacity: 1;
        height: 30px;
        padding: 10px;
        color: #ffffff;
        background-color: #3636ff;
        transition: opacity 1.25s ease-in-out;
        -moz-transition: opacity 1.25s ease-in-out;
        -webkit-transition: opacity 1.25s ease-in-out;
    }

    .fade-enter,
    .fade-leave {
        opacity: 0.1;
    }
    </style>
</head>

<body>
    <h3>为了展示，所以动画效果，调比较慢，过渡有回调函数，此例使用 vuejs ，提供的过渡回调。
    </h3>
    <div id="example">
        <ul>
            <li>
                <div v-if="show" :transition="transitionName">hello</div>
            </li>
            <li>
                <button @click="show=!show">show:{{show}} , 过渡效果 : {{transitionName}}</button>
            </li>

            <li>
                <button @click="transitionName_set_to('expand')">过渡效果 expand</button>
            </li> {{$data|json}}</li>
        </ul>
    </div>
    <script>
    Vue.transition('expand', {

        beforeEnter: function(el) {
            el.textContent = '输入前 beforeEnter'
        },
        enter: function(el) {
            el.textContent = '输入时 enter'
        },
        afterEnter: function(el) {
            el.textContent = '输入后 afterEnter'
        },
        enterCancelled: function(el) {
            // handle cancellation
        },

        beforeLeave: function(el) {
            el.textContent = '离开前 beforeLeave'
        },
        leave: function(el) {
            el.textContent = '离开时 leave'
        },
        afterLeave: function(el) {
            el.textContent = '离开后 afterLeave'
        },
        leaveCancelled: function(el) {
            // handle cancellation
        }
    })
    var vm = new Vue({
        el: '#example',
        data: {
            show: true,
            transitionName: 'expand'
        },
        methods: {
            transitionName_set_to: function(to1) {
                this.transitionName = to1;
            }
        }

    })
    </script>
</body>

</html>