Vue的学习（三）

Vue的学习(三)

transition

• 在下列情形中可以提供进入/离开的过渡效果

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

   对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

css动画过渡

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<div id="example2">
    <button @click="show=!show">Toggle show</button>
    <transition name="bounce">
        <p v-if="show">The best preparation for tomorrow is doing your best today.对明天做好的准备就是今天做到最好。</p>
    </transition>
</div>

---

<script>
    var example2 = new Vue({
        el:"#example2",
        data:{
            show:true
        }
    });
</script>

---

<style>
    /* 省略了兼容性前缀 */
    .bounce-enter-active{
        animation:bounce-in .5s;
    }

    .bounce-leave-active{
        animation:bounce-in .5s reverse;
    }

    @keyframes bounce-in{
        0%{
            transform: scale(0);
        }
        50%{
            transform:scale(1.5);
        }
        100%{
            transform:scale(1);
        }
    }
</style>

运行效果如下：

v-on:

• 缩写： @

API v-on: 作用是把元素节点上的事件与Vue实例中的属性或方法绑定在一起

例1：

<style>
    .fade-enter-active,.fade-leave-active{
        transition:opacity 1s;
    }

    .fade-enter,.fade-leave-to{
        opacity:0;
    }
</style>

---

<div id="app1">
    <button v-on:click="show=!show">
        click
    </button>
    <transition name="fade">
        <h2 v-if="show">
            {{title}}
        </h2>
    </transition>
</div>

---

<script>
    var example1 = new Vue({
        el:"#app1",
        data:{
            title:"淡淡的淡定",
            show:true
        }
    });
</script>

运行效果如下：

例2：

<div id="example2">
    <form action="https://www.baidu.com">
        <!-- 文本框形式的input，:是v-bind: @是v-on: -->
        <input type="text" :value="val" @input="myInput">
        <h1>
            {{val}}
        </h1>
    </form>
</div>

---

<script>
    var app2 = new Vue({
        el:"#example2",
        // data中的数据是即时更新的，即数据更改后会即时在视图中显示
        data:{
            val:123
        },
        methods:{
            // e是返回值，即输入input中的内容
            myInput(e){
                // 数据一般保存在target中
                this.val = e.target.value
            }
        }
    });
</script>

在文本框中输入回车会跳转至百度，运行效果如下：