如何用原生js写一个弹窗消息提醒插件

当消息被触发的时候,会有一个自上而下的淡入过程。
在持续了一段时间后会自动的消失,或者是需要用户来手动的点击关闭按钮。
在消息消失的时候,会有一个自下而上的淡出过程。
消息是可以叠加弹出的,最新的消息会排在消息列表的最后面。
当前面的消息消失后,后面的消息会有一个向上滑动效果。
然后消息本身是有三部分组成

消息图标,用来区分不同类型的消息。
消息文本。
关闭按钮,并不是所有消息都需要关闭按钮。

2. 实现样式

那么,不管我们是用原生js还是vue,首先呢,我们都需要把这个消息的基本样式给写出来,然后再通过js来控制消息的弹出和关闭。
所以,我们先来写html和css。

<!-- message.html --> <!-- 这个css是我引用阿里的一些字体图标,请戳: https://www.iconfont.cn/ --> <link href="https://at.alicdn.com/t/font_1117508_wxidm5ry7od.css"> <link href="https://www.jb51.net/article/message.css" > <script src="https://www.jb51.net/article/message.js"></script> <!-- 消息外层容器,因为消息提醒基本上是全局的,所以这里用id,所有的弹出消息都是需要插入到这个容器里边的 --> <div> <div> <!-- 消息图标 icon icon-success对应我的阿里字体图标的font-class --> <div></div> <!-- 消息文本 --> <div>这是一条正经的消息~</div> <!-- 关闭按钮 --> <div></div> </div> <div> <div></div> <div>这是一条正经的消息~</div> </div> </div> /* message.css */ #message-container { position: fixed; left: 0; top: 0; right: 0; /* 采用flex弹性布局,让容器内部的所有消息可以水平居中,还能任意的调整宽度 */ display: flex; flex-direction: column; align-items: center; } #message-container .message { background: #fff; margin: 10px 0; padding: 0 10px; height: 40px; box-shadow: 0 0 10px 0 #eee; font-size: 14px; border-radius: 3px; /* 让消息内部的三个元素(图标、文本、关闭按钮)可以垂直水平居中 */ display: flex; align-items: center; } #message-container .message .text { color: #333; padding: 0 20px 0 5px; } #message-container .message .close { cursor: pointer; color: #999; } /* 给每个图标都加上不同的颜色,用来区分不同类型的消息 */ #message-container .message .icon-info { color: #0482f8; } #message-container .message .icon-error { color: #f83504; } #message-container .message .icon-success { color: #06a35a; } #message-container .message .icon-warning { color: #ceca07; } #message-container .message .icon-loading { color: #0482f8; }

3. 实现动画

接下来要做的就是这个消息的弹出和消失动画,我们还是用css来实现。

想要在css里边实现自定义的动画,首先需要用@keyframes来定义一个动画规则,然后再通过animation属性把动画应用到某个元素上就可以了。
所谓的动画规则其实就是一个动画序列,或者可以理解为一个个的关键帧,而关键帧的内部就是你想改变的css属性,你可以在关键帧里边写上几乎任何的css属性,当动画被应用的时候,这些css属性就会根据各个关键帧做出相应的变换。

那我们先用@keyframes来写一个动画规则吧

/* message.css */ /* 这个动画规则我们就叫做message-move-in吧,随后我们会用animation属性在某个元素上应用这个动画规则。 */ @keyframes message-move-in { 0% { /* 前边分析过了,弹出动画是一个自上而下的淡入过程 */ /* 所以在动画初始状态要把元素的不透明度设置为0,在动画结束的时候再把不透明度设置1,这样就会实现一个淡入动画 */ opacity: 0; /* 那么“自上而下”这个动画可以用“transform”变换属性结合他的“translateY”上下平移函数来完成 */ /* translateY(-100%)表示动画初始状态,元素在实际位置上面“自身一个高度”的位置。 */ transform: translateY(-100%); } 100% { opacity: 1; /* 平移到自身位置 */ transform: translateY(0); } }

然后我们再定义一个和message元素同级的类move-in,把message-move-in这个动画规则给应用到move-in类上,这样我们需要让哪个消息弹出,就只需要在消息的类上加一个move-in就行。

/* message.css */ #message-container .message.move-in { /* animation属性是用来加载某个动画规则 请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation */ animation: message-move-in 0.3s ease-in-out; }

可以看到,只需要在某个message上追加一个move-in就能实现弹出动画。
那么,消失动画也是一个套路,只不过跟弹出动画反过来而已。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/e5eb2a37bb0517d5c10894e84a561207.html