一、scoped deep 问题

1. 问题背景

弹窗组件直接插入到body里面 在scope style标签修改样式 无法修改加上deep也不行

2. 父子组件时 scoped添加自定义属性的情况

3. 加上deep的情况

4. 总结结论

1. scoped 会在当前组件每个元素加上hash的自定义属性
2. 父子组件 scoped会在子组件的最外层加上父节点的自定义属性
3. deep 是将原本.class[data-v-hash] 改成了  [data-v-hash]  .class {}

二、css动画问题

1. 创建

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

2. 使用

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

3. 常用属性

// paused|running;
div:hover {
  animation-play-state: paused;
}         

鼠标悬浮添加属性 不悬浮就不添加删除