41 css 動畫

• 使用 animate.css
• 代碼

<!-- 1、引用 animate.css -->
<link rel="stylesheet" href="animate.css">

 <div id="app">
    <button @click="flag=!flag">切換</button>
    <!-- 2、用一個 <transition> 標簽把動畫影響的元素包裹起來 -->
    <!-- 3、給 <transition> 屬性 enter-active-class="指定元素顯示時的動畫" leave-active-class="元素隱藏時的動畫" -->
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <h1 v-if="flag">測試</h1>
    </transition>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            flag: true,
        },
    });
</script>

• 使用 <transition> 標簽將要受到動畫影響的元素包起來
• 在 <transition> 標簽中指定屬性 enter-active-class="顯示過程動畫樣式類"...
• 一共有這么幾個屬性：

# enter="開始進入的樣式"
# enter-active="進入過程中"
# enter-to="進完成后"
# leave-active="離開過程中"
# leave="完全離開后"

42 directive 自定義指令

• 代碼

<div id="app">
    <!-- <span v-star>測試</span> -->
    <input type="text" v-model="title" v-bindandupdate.focus="title">
</div>

<script>
    // Vue.directive('star', {
    //     // 綁定
    //     bind(el, bind) {
    //         console.log(bind);
    //     }
    // })
    // Vue.directive('test', {
    //     // 更新
    //     update(el, bind) {
    //         console.log(bind);
    //     }
    // })
    Vue.directive('bindandupdate', function(el, bind) {
        console.log(bind);
    })
    var app = new Vue({
        el: '#app',
        data: {
            title: "ceshi",
        },
    });
</script>

• 使用 Vue.directive('指令名稱', { 動作() { //觸發(fā)時執(zhí)行的代碼 } })
• 在標簽上使用 v-指令名稱 來將指令綁定到元素上
• bind() 動作是指元素被載入后就觸發(fā)的動作
• update() 動作是指元素被更新時觸發(fā)的操作
• 通常我們就使用 bind 和 update 兩個動作，所有很多時候我們可以簡寫為 Vue.directive('指令名稱', function() { //同時綁定update 和 bind 動作 })

43 在組件中使用指令

• 代碼

<div id="app">
    <h1 v-test="color">字</h1>
    <input type="text" v-model="color" v-focus>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            color: 'red',
        },
        directives: {
            // 這個相當于 bind() + update() 動作
            test(el, bind) {
                var color = bind.value ? bind.value : red;
                el.style.cssText = "color:" + color;
            },
            // 這個相當于其他動作
            focus: {
                // 比如 inserted : 當子元素插入到父元素的時候調用
                inserted(el, bind) {
                    el.focus();
                }
            }
        }
    });
</script>

• 指令都寫在 directives 屬性中
• 同樣，直接寫指令() {} 是直接綁定 bind 和 update 兩個動作
• 如果要用其他動作，則可以使用 指令: { 動作() { //代碼 } }