<div id="app"><br> <input type="button" value="跑起来" @click="flag=!flag"><br> <transition><br> <h3 v-if="flag">这是使用过渡类名进行得动画效果~</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">这是一个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">使用第三方库进行动画效果</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) { // 动画进入之前的回调<br> el.style.transform = "translate(0, 0)"<br> },<br> enter(el, done) { // 动画进入完成时候的回调<br> //可以认为 el.offsetWidth 会强制动画刷新<br> el.offsetWidth;<br> el.style.transform = 'translateX(0px)';<br><br> // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用<br> done();<br> },<br> afterEnter(el) { // 动画进入完成之后的回调<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>这是使用 Vue.extend 创建的组件</h1>'<br>});
使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象)
如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 – 链接；
如果不使用驼峰,则直接拿名称来使用即可;
<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 --><br><template id="tmpl"><br><div><br> <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1><br> <h4>好用,不错!</h4><br> </div><br></template>
注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
Original: https://www.cnblogs.com/zdh052286/p/12491451.html
Author: 清酒一杯
Title: vue动画效果和vue组件——day03
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/581593/
转载文章受原作者版权保护。转载请注明原作者出处！