vue动画效果和vue组件——day03

<div id="app"><br>    <input type="button" value="&#x8DD1;&#x8D77;&#x6765;" @click="flag=!flag"><br>    <transition><br>        <h3 v-if="flag">&#x8FD9;&#x662F;&#x4F7F;&#x7528;&#x8FC7;&#x6E21;&#x7C7B;&#x540D;&#x8FDB;&#x884C;&#x5F97;&#x52A8;&#x753B;&#x6548;&#x679C;~</h3><br>    </transition>   <br></div>

 <script><br>     var vm = new Vue({<br>         el:'#app',<br>         data:{<br>             flag:false<br>         },<br>         methods:{<br><br>         }<br>     })<br></script>

<style><br>    .v-enter,<br>    .v-leave-to {<br>        opacity: 0;<br>        transform: translateX(150px);<br>    }<br>    .v-enter-active,<br>    .v-leave-active{<br>        transition: all 0.8s ease;<br>    }<br></style>

v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了
v-enter-active 【入场动画的时间段】 v-leave-active 【离场动画的时间段】

自定义过渡类名，在 transition标签内添加一个 name属性

1.HTML结构

 <transition name="one"><br>     <h1 v-if="flag">&#x8FD9;&#x662F;&#x4E00;&#x4E2A;H1</h1><br></transition>     

2.样式结构

<style><br>  .one-enter,<br>  .one-leave-to {<br>        opacity: 0;<br>        transform: translateY(150px);<br>    }<br>    .one-enter-active,<br>    .one-leave-active{<br>        transition: all 0.8s ease;<br>    }<br></style>

1.导入第三方库

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

2.定义transition属性

  <transition <br>              enter-active-class="flipInY" <br>              leave-active-class="flipOutX"<br>              :duration="{ enter: 200, leave: 400 }"><br>      <h3 v-if="flag" class="animated">&#x4F7F;&#x7528;&#x7B2C;&#x4E09;&#x65B9;&#x5E93;&#x8FDB;&#x884C;&#x52A8;&#x753B;&#x6548;&#x679C;</h3><br></transition>

上面的两个例子动画是全场动画，而做不到半场动画的效果，使用钩子函数可以做到半场动画效果

1.html结构

2.style样式

  <style><br>      .ball {<br>          background-color: aquamarine;<br>          width: 50px;<br>          height: 50px;<br>          border-radius: 50%;<br>      }<br></style>

3.vm实例定义三个methods钩子方法：

methods: {<br>        beforeEnter(el) { // &#x52A8;&#x753B;&#x8FDB;&#x5165;&#x4E4B;&#x524D;&#x7684;&#x56DE;&#x8C03;<br>          el.style.transform = "translate(0, 0)"<br>        },<br>        enter(el, done) { // &#x52A8;&#x753B;&#x8FDB;&#x5165;&#x5B8C;&#x6210;&#x65F6;&#x5019;&#x7684;&#x56DE;&#x8C03;<br>      //&#x53EF;&#x4EE5;&#x8BA4;&#x4E3A; el.offsetWidth &#x4F1A;&#x5F3A;&#x5236;&#x52A8;&#x753B;&#x5237;&#x65B0;<br>          el.offsetWidth;<br>          el.style.transform = 'translateX(0px)';<br><br>          // &#x8FD9;&#x91CC;&#x7684; done&#xFF0C; &#x8D77;&#x59CB;&#x5C31;&#x662F; afterEnter &#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF1A;done &#x662F; afterEnter &#x51FD;&#x6570;&#x7684;&#x5F15;&#x7528;<br>          done();<br>        },<br>        afterEnter(el) { // &#x52A8;&#x753B;&#x8FDB;&#x5165;&#x5B8C;&#x6210;&#x4E4B;&#x540E;&#x7684;&#x56DE;&#x8C03;<br>          this.isshow = !this.isshow;<br>        }<br>      }

注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象, 大家可以认为 ， el 是通过 document.getElementById(”) 方式获取到的原生JS DOM对象

使用 transition-group标签

1.html

 <transition-group appear tag="ul"><br>     <li v-for="(item, i) in list" :key="item.id" @click="del(i)"><br>         {{item.id}} --- {{item.name}}<br>     </li><br></transition-group>

2.vm实例

<script><br>    var vm = new Vue({<br>        el: '#app',<br>        data: {<br>            id: '',<br>            name: '',<br>            list: [<br>                { id: 1, name: '小一' },<br>                { id: 2, name: '小二' },<br>                { id: 3, name: '小三' }<br>            ]<br>        },<br>        methods: {<br>            add() {<br>                this.list.push({id:this.id,name:this.name})<br>                this.id = this.name = ''<br>            },<br>            del(i) {<br>                this.list.splice(i, 1)<br>            }<br>        }<br>    })<br></script>

3.style样式

<style><br>    li {<br>        border: 1px dashed rgb(187, 3, 233);<br>        margin: 5px;<br>        line-height: 35px;<br>        padding-left: 5px;<br>        font-size: 12px;<br>        width: 100%;<br>    }<br><br>    li:hover {<br>        background-color: rgb(32, 226, 7);<br>        transition: all 0.8s ease;<br>    }<br><br>    .v-enter,<br>    .v-leave-to {<br>        opacity: 0;<br>        transform: translateY(80px);<br>    }<br><br>    .v-enter-active,<br>    .v-leave-active {<br>        transition: all 0.6s ease;<br>    }<br><br>    /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */<br>    .v-move {<br>        transition: all 0.6s ease;<br>    }<br>    .v-leave-active{<br>        position: absolute;<br>    }<br></style>

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

通过 template 属性，指定了组件要展示的HTML结构

var login = Vue.extend({<br>    template: '<h1>&#x8FD9;&#x662F;&#x4F7F;&#x7528; Vue.extend &#x521B;&#x5EFA;&#x7684;&#x7EC4;&#x4EF6;</h1>'<br>});

使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象)
如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 – 链接；
如果不使用驼峰,则直接拿名称来使用即可;

<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  --><br><template id="tmpl"><br><div><br>    <h1>&#x8FD9;&#x662F;&#x901A;&#x8FC7; template &#x5143;&#x7D20;,&#x5728;&#x5916;&#x90E8;&#x5B9A;&#x4E49;&#x7684;&#x7EC4;&#x4EF6;&#x7ED3;&#x6784;,&#x8FD9;&#x4E2A;&#x65B9;&#x5F0F;,&#x6709;&#x4EE3;&#x7801;&#x7684;&#x53EA;&#x80FD;&#x63D0;&#x793A;&#x548C;&#x9AD8;&#x4EAE;</h1><br>    <h4>&#x597D;&#x7528;,&#x4E0D;&#x9519;!</h4><br>    </div><br></template>

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

Original: https://www.cnblogs.com/zdh052286/p/12491451.html
Author: 清酒一杯
Title: vue动画效果和vue组件——day03