快速上手vue动画

vue动画

步骤:

• 1.把需要显示隐藏动画的标签 放入transition组件中 作为子元素
• 2.在css中设置动画效果 标签显示和隐藏是两个动画过程 叫做入场和出场
  添加过transition组件后 vue会自动定义入场和出厂单额class设置 通过class设置动画
  入场:标签显示的过程(v-enter v-enter-active v-enter-to)
  出场:标签显示的过程(v-leave v-leave-active v-leave-to)
  如果需要在一个组件中实现多种动画效果 需要给transition添加name属性区分动画
  当我们给一个transition组件设置name时 就可以单独设置这个组件的入场和出场
  只需要把v前缀改成name值前缀即可 例如 v-enter => a-enter(a为name属性名)

vue列表动画

transition组件的子标签只能有一个 不能写多个
transition-group可以设置多个子标签 默认会被渲染成span标签 使用tag属性将组件标签渲染成执行的标签
例如:

	<transition-group tag="ul">
			<li v-for="(item, index) in list" :key="item">项目编号{{item}}</li>

		</transition-group>

注意:transition-group 组件中的元素要求必须设置key属性 同时有两个要求

• 1.必选性:必须设置key 不然会报错
• 2.不变性:key的值一旦设置 不能改变 所以key不能设置索引 因为数据从前面删除元素时 数据的索引会发生变化 会造成动画显示异常
  key属性不要求唯一性 即使key值有重复 也可以正常执行

位移动画

如果transition-group中的列表长度不变 不涉及显示隐藏或者创建销毁 就不能设置入场和出场动画 此时只是列表元素的更新 则使用v-move 设置位移动画即可 跟出场入场动画操作类似

自定义指令

设置全局指令

	<h1 v-color="aa">张三</h1>
	<h1 v-color="'blue'" v-bgc="'red'">张三</h1>

		// 参一:节点对象
		Vue.directive("color", (el, binding) => {
			console.log(el);// dom对象
			console.log(binding.value);// 指令对应的值
			el.style.color = binding.value

		})

局部指令

		new Vue({
			el: '#myApp',
			data: {
				aa: "green"
			},
			methods: {

			},
			// 局部指令
			directives:{
				bgc(el,binding){
					el.style.backgroundColor = binding.value
				}
			}
		})