Vue2 常用用法

Vue2 常用用法

• Vue 动画
• Vue 透传Attrbute、插槽
• CSS布局原则
• 关于动画与过渡

Vue 动画

1. 进入、离开的过渡

动画也有钩子函数。当移动到某个位置的时候，触达某个钩子函数。
动画钩子函数的本质是副作用函数，就是触发动画的同时，还需要触发别的操作，这个别的操作就是副作用。可以在触发动画的时候，触发某个钩子函数，操作DOM。比如动画入场的时候，背景色是红色，动画出场的时候，背景色变成蓝色。

2. 列表的过渡

3. 状态的过渡

Vue 透传Attrbute、插槽

1.透传Attrbute

举个例子

// 父组件
<Mybutton class="fclass"></Mybutton>
// 子组件
<button class="cclass"></button>


// 因为Attr穿透，将来渲染的格式
<button class="cclass fclass"></button>

2. 插槽

CSS布局原则

flex 布局常见的问题：当子元素内容超出父元素时，不出现滚动条的问题。

父元素flex:1且内容超出后的最佳解决方案：出现滚动条。

解决方案：

1. 给flex:1的子元素加上overflow:hidden；让它不能超出父元素的范围。
2. 子元素里的内容再加一个div，这个div使用height:100%，占满父元素整个高度，并且overflow：auto

关于动画与过渡

举个例子，比如一个loading的动画。
loading动画的原理就是，每个字符都向上动，且有延迟时间。

<div class="loading">
  <span>l</span>
  <span>o</span>
  <span>a</span>
  <span>d</span>
  <span>i</span>
  <span>n</span>
  <span>g</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>


.loading {
  margin: 100px;
  height: 100px;
  line-height: 100px;
}

.loading > span {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  animation: loadingWord 800ms ease-in infinite alternate;
}

/* 10个字母，每一个的延迟都不同 */
.loading-1 > span:nth-of-type(1){ animation-delay: 200ms; }
.loading-1 > span:nth-of-type(2){ animation-delay: 300ms; }
.loading-1 > span:nth-of-type(3){ animation-delay: 400ms; }
.loading-1 > span:nth-of-type(4){ animation-delay: 500ms; }
.loading-1 > span:nth-of-type(5){ animation-delay: 600ms; }
.loading-1 > span:nth-of-type(6){ animation-delay: 700ms; }
.loading-1 > span:nth-of-type(7){ animation-delay: 800ms; }
.loading-1 > span:nth-of-type(8){ animation-delay: 900ms; }
.loading-1 > span:nth-of-type(9){ animation-delay: 1000ms; }
.loading-1 > span:nth-of-type(10){ animation-delay: 1100ms; }


@keyframes loadingWord {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-16px);
  }
}

过渡需要触发时机，比如click，:hover

<div class="myTransition">
	关于过渡
</div>

.myTransition{
	width: 200px;
	height: 100px;
	background-color: pink;
	/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
	transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
.myTransition:hover {  /* 鼠标经过盒子，触发过渡 */
  width: 600px;
  height: 300px
}