Result 结果提示
基本说明
本框架一共定义了五种结果提示，分别是success，error，warning，info和question，该提示一般用操作结果反馈。
success表示成功、结束、完成error表示错误、有问题warning表示提醒、注意、警告info表示信息提示、注意question表示疑问、求助
ax-result定义了结果提示，通过使用ax-success，ax-error，ax-warning，ax-info和ax-question表示不同结果提示，本演示效果使用了iconfont图标，复制可用。
<div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o"></i></div>
<div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o"></i></div>
<div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o"></i></div>
<div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o"></i></div>
<div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o"></i></div>
<div></div>
<div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-f"></i></div>
<div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-f"></i></div>
<div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-f"></i></div>
<div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-f"></i></div>
<div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-f"></i></div>
<div></div>
<div class="ax-result ax-success"><i class="ax-iconfont ax-icon-check-o-t"></i></div>
<div class="ax-result ax-error"><i class="ax-iconfont ax-icon-close-o-t"></i></div>
<div class="ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o-t"></i></div>
<div class="ax-result ax-info"><i class="ax-iconfont ax-icon-info-o-t"></i></div>
<div class="ax-result ax-question"><i class="ax-iconfont ax-icon-question-o-t"></i></div>
SVG动画提示
配合结果提示，本框架定制了对应的SVG结果动画图标，默认是隐藏，对svg添加ax-result-show可动画显示。基本结构如下：
<div class="ax-result">
<svg class="svg-success"></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-success"></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-success" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-error" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M28.774,57.9246L57.9247,28.7739"></path><path class="svg-line svg-in-2" d="M57.9246,57.9246L28.7739,28.7739"></path></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-warning" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-out" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path><path class="svg-line svg-in-1" d="M43.3493,27.8713L43.3493,57.2858"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="64.3337" r="2.1166"></circle></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-info" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M43.3493,65.0602L43.3493,30.9723"></path><circle class="svg-circle svg-in-2" cx="43.3492" cy="23.5856" r="2.1166"></circle></svg>
</div>
<div class="ax-result ax-result-show">
<svg class="svg-question" xmlns="http://www.w3.org/2000/svg" width="86.6986mm" height="86.6986mm" viewBox="0 0 86.6986 86.6986"><path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path><path class="svg-line svg-in-1" d="M32.3757 35.7255c-0.2203,-11.823 12.5789,-14.1087 18.4056,-9.4189 5.4663,4.3995 4.7426,12.804 -3.1088,17.9938 -3.0015,1.9839 -3.0003,3.8403 -3.0003,10.1707"></path><circle class="svg-circle svg-in-2" cx="44.6612" cy="60.5502" r="2.1166"></circle></svg>
</div>
-
<div class="ax-result"> <svg class="svg-success" viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-in-1" d="M26.316,42.859L37.9984,54.5414L60.3826,32.1572"></path> </svg> </div> <div class="ax-result"> <svg class="svg-error" viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-in-1" d="M28.774,57.9246L57.9247,28.7739"></path> <path class="svg-line svg-in-2" d="M57.9246,57.9246L28.7739,28.7739"></path> </svg> </div> <div class="ax-result"> <svg class="svg-warning" viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path> <path class="svg-line svg-out" d="M43.4611 7.24c2.8081,0.0924 4.39,1.7 5.3045,3.1159l17.4543 29.9414 17.3445 29.7538c0.5448,1.0193 1.596,4.0544 0.1109,6.4168 -1.4849,2.3626 -3.6815,2.9155 -5.3768,2.992l-34.9082 0.0002 -34.6892 -0.0002c-1.1636,-0.0421 -4.3433,-0.6583 -5.6666,-3.1131 -1.3232,-2.4549 -0.7085,-4.6157 0.0723,-6.1078l17.454 -29.9417 17.3449 -29.7537c0.6185,-0.977 2.7471,-3.396 5.5554,-3.3036z"></path> <path class="svg-line svg-in-1" d="M43.3493,27.8713L43.3493,57.2858"></path> <circle class="svg-circle svg-in-2" cx="43.3492" cy="64.3337" r="2.1166"></circle> </svg> </div> <div class="ax-result"> <svg class="svg-info" viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-in-1" d="M43.3493,65.0602L43.3493,30.9723"></path> <circle class="svg-circle svg-in-2" cx="43.3492" cy="23.5856" r="2.1166"></circle> </svg> </div> <div class="ax-result"> <svg class="svg-question" viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> <path class="svg-line svg-in-1" d="M32.3757 35.7255c-0.2203,-11.823 12.5789,-14.1087 18.4056,-9.4189 5.4663,4.3995 4.7426,12.804 -3.1088,17.9938 -3.0015,1.9839 -3.0003,3.8403 -3.0003,10.1707"></path> <circle class="svg-circle svg-in-2" cx="44.6612" cy="60.5502" r="2.1166"></circle> </svg> </div> <div></div> <a href="###" class="ax-btn ax-btn-primary" id="get-svg-ani">点我动起来！</a> <a href="###" class="ax-btn" id="delete-svg-ani">取消</a> -
let btnAni = document.querySelector('#get-svg-ani'), btnDelete = document.querySelector('#delete-svg-ani'), svgAni = document.querySelector('#svg-ani'); btnAni.onclick = function () { svgAni.querySelectorAll('.ax-result').forEach(function (item) { item.classList.add('ax-result-show'); }); } btnDelete.onclick = function () { svgAni.querySelectorAll('.ax-result').forEach(function (item) { item.classList.remove('ax-result-show'); }); }
SVG过渡
使用axResult(elem,state)函数可实现结果动态提示，实现从检查状态到结果的过渡，支持三种结果过渡：成功、失败、提示和问题。axResult函数有两个参数：
- elem：是指ax-result的ID或者Dom
- state：是指指定呈现的结果，可填：success、error、info和question
-
<div class="ax-row ax-split"> <div class="ax-col ax-col-6"> <div class="ax-result" id="goSuccess"> <svg viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> </svg> </div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-btn-primary" id="btnSuccess">过渡成功</a> </div> <div class="ax-col ax-col-6"> <div class="ax-result" id="goError"> <svg viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> </svg> </div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-btn-primary" id="btnError">过渡失败</a> </div> <div class="ax-col ax-col-6"> <div class="ax-result" id="goInfo"> <svg viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> </svg> </div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-btn-primary" id="btnInfo">过渡通知</a> </div> <div class="ax-col ax-col-6"> <div class="ax-result" id="goQuestion"> <svg viewBox="0 0 86.6986 86.6986"> <path class="svg-line svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path> </svg> </div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-btn-primary" id="btnQuestion">过渡问题</a> </div> </div> -
let btnSuccess = document.querySelector('#btnSuccess'); btnSuccess.onclick = function(){ axResult('#goSuccess','success'); } let btnError = document.querySelector('#btnError'); btnError.onclick = function(){ axResult('#goError','error'); } let btnInfo = document.querySelector('#btnInfo'); btnInfo.onclick = function(){ axResult('#goInfo','info'); } let btnQuestion = document.querySelector('#btnQuestion'); btnQuestion.onclick = function(){ axResult('#goQuestion','question'); }