chrome-devTools的animations工具与vant UI框架的mask实现
起因遇到一个使用了vantUI框架，但需要定制dialog的需求，所以只能去看vant的transition动画的实现，来满足自己的需求...
查看vant的源码
vant的源码可以在这里看到：https://github.com/youzan/vant/blob/dev/packages/vant-css/src/dialog.css
其中dialog的动效在这：
&-bounce-enter {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.7);
}
&-bounce-leave-active {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.9);
}这个是用来控制dialog的中间部分的内容弹出的时候的变形动画（..不太好表述），但是试一下就会发现问题，这里没有mask啊，也就是说这里弹出dialog底部的淡黑色的遮罩的动效还得另找...
在公共的css样式中找到了一个fade-in/out：https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/animation.css
.van-fade {
&-enter-active {
animation: .3s van-fade-in;
}
&-leave-active {
animation: .3s van-fade-out;
}
}
@keyframes van-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes van-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}再平时使用vant的dialog组件时能查看到：
<!-- 未弹出前 -->
<div class="van-dialog" style="z-index: 2003; display: none;">...</div>
<div class="van-modal" style="z-index: 2003; display: none;"></div>
<!-- 弹出后（同时有class的切换） -->
<div class="van-dialog" style="z-index: 2005;">...</div>
<div class="van-modal" style="z-index: 2004;"></div>可以猜测到，dialog和modal(也就是那个底部的mask)是一种同级组件的关系，而且应该是两个动画，因为同时有class的切换，最后的z-index也说明了这点，因为弹出后是同级关系，所以需要用z-index来控制内容显示在mask之上
使用chrome-devTools的animations工具
以上也只是猜测，想到动画，作为万能的chrome-devTools肯定会有检查动画的工具吧，果然：
google官方-检查动画（需翻墙）
Chrome DevTools谷歌浏览器开发者工具如何检查动画（不好翻墙的可以参考这个）
在devTools的面板里面打开右边三个竖点的菜单，打开more Tools选项，其中的animations就是动画检查工具了
两个用途：
- 检查动画： 慢速播放、重播或检查动画组的源代码； 动画检查器支持 CSS 动画、CSS 过渡和网络动画，当前不支持
requestAnimationFrame动画 - 修改动画： 修改动画组的时间、延迟、持续时间或关键帧偏移，不支持编辑贝塞尔曲线和关键帧
使用：
打开后，直接在页面开始的动画就会被记录下来，而且会被记录为一个个的动画组
动画组的概念：
例如这里是vant的dialog动画被记录下来的两个动画组，我们点击第一个就可以发现，第一个动画组是mask遮罩层的弹出动画，第二个动画组是dialog的弹出动画，而底部还有详细的动画元素，动画过程
控制动画播放速度：
在上述图示的1部分的100%, 25%, 10%,就可以进行动画的速度进行更改
在底部的动画帧图中，可以对动画进行
延后动画/改变动画：
在上述图示的4部分，我们可以对动画过程进行控制，通过整体拖动那个扇形区域就可以进行动画的延时，例如这样就可以把mask动画和dialog动画区分的更清晰，通过缩短那个扇形区域可以达到改变动画效果的作用
最终效果
有了工具的帮助，我们可以很准确的判断出有两个动画，而且可以对动画过程进行延时，减速，让我们对整个动画过程有精准的控制
于是我们用两个组件来做，一个mask组件（用来fade-in/out的效果），一个dialog组件（做transform效果）
最终代码如下：
<!-- dialog组件 -->
<template>
<!--<div>-->
<transition name="move">
<div class="dialog" >
<div class="content">
<button @click="dispear">关闭</button>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
}
},
methods: {
dispear() {
this.$emit('close');
}
},
components: {}
}
</script>
<style lang="scss" scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
width: 85%;
font-size: 16px;
overflow: hidden;
transition: .3s;
border-radius: 4px;
background-color: #fff;
transform: translate3d(-50%, -50%, 0);
z-index: 90;
.content {
width: 300px;
height:200px;
margin: 0 auto;
}
&.move-enter {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.7);
}
&.move-leave-active {
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(0.9);
}
}
</style><!-- mask组件 -->
<template>
<transition name="van-fade">
<div class="mask"></div>
</transition>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {}
},
methods: {},
components: {}
}
</script>
<style lang="scss" scoped>
.mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.7);
}
van-fade {
&-enter-active {
animation: .3s van-fade-in;
}
&-leave-active {
animation: .3s van-fade-out;
}
}
@keyframes van-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes van-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
使用的时候，两个组件同时引用即可，最终效果：
总结：其实一开始没想到是有两个动效的，所以一直也没做出来，之后就放弃了，由于的确有一些弹窗没办法，只能去定制，所以就再次硬着头皮上，没想到原来是有两个transition，加上同级表示来做的（再次说明要善用chrome Devtools），感悟一句：chrome Devtools其实真的是前端入门的地方