使用mo.js和animocons创建了一个按钮。它工作正常，但我想添加/**
* demo.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2016, Codrops
* http://www.codrops.com
*/
(function(window) {
"use strict";
// taken from mo.js demos
function isIOSSafari() {
var userAgent;
userAgent = window.navigator.userAgent;
return userAgent.match(/iPad/i) || userAgent.match(/iPhone/i);
}
// taken from mo.js demos
function isTouch() {
var isIETouch;
isIETouch = navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
return [].indexOf.call(window, "ontouchstart") >= 0 || isIETouch;
}
// taken from mo.js demos
var isIOS = isIOSSafari(),
clickHandler = isIOS || isTouch() ? "touchstart" : "click";
function extend(a, b) {
for (var key in b) {
if (b.hasOwnProperty(key)) {
a[key] = b[key];
}
}
return a;
}
function Animocon(el, options) {
this.el = el;
this.options = extend({}, this.options);
extend(this.options, options);
this.checked = false;
this.timeline = new mojs.Timeline();
for (var i = 0, len = this.options.tweens.length; i < len; ++i) {
this.timeline.add(this.options.tweens[i]);
}
var self = this;
this.el.addEventListener(clickHandler, function() {
if (self.checked) {
self.options.onUnCheck();
} else {
self.options.onCheck();
self.timeline.replay();
}
self.checked = !self.checked;
});
}
Animocon.prototype.options = {
tweens: [new mojs.Burst({})],
onCheck: function() {
return false;
},
onUnCheck: function() {
return false;
}
};
// grid items:
var items = [].slice.call(document.querySelectorAll("ol.grid > .grid__item"));
function init() {
/* Icon 1 */
var el1 = items[0].querySelector("button.icobutton"),
el1span = el1.querySelector("span"),
elCounter = el1.querySelector("span.icobutton__text");
new Animocon(el1, {
tweens: [
// burst animation
new mojs.Burst({
parent: el1,
radius: { 30: 90 },
count: 6,
children: {
fill: "#C0C1C3",
opacity: 0.6,
radius: 15,
duration: 1700,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}
}),
// ring animation
new mojs.Shape({
parent: el1,
type: "circle",
radius: { 0: 60 },
fill: "transparent",
stroke: "#C0C1C3",
strokeWidth: { 20: 0 },
opacity: 0.6,
duration: 700,
easing: mojs.easing.sin.out
}),
// icon scale animation
new mojs.Tween({
duration: 1200,
onUpdate: function(progress) {
if (progress > 0.3) {
var elasticOutProgress = mojs.easing.elastic.out(
1.43 * progress - 0.43
);
el1span.style.WebkitTransform = el1span.style.transform =
"scale3d(" +
elasticOutProgress +
"," +
elasticOutProgress +
",1)";
} else {
el1span.style.WebkitTransform = el1span.style.transform =
"scale3d(0,0,1)";
}
}
})
],
onCheck: function() {
el1.style.color = "#988ADE";
elCounter.innerHTML = Number(elCounter.innerHTML) + 1;
},
onUnCheck: function() {
el1.style.color = "#C0C1C3";
var current = Number(elCounter.innerHTML);
elCounter.innerHTML =
current > 1 ? Number(elCounter.innerHTML) - 1 : "";
}
});
/* Icon 1 */
}
init();
})(window);类。当按钮加载此类时，必须对其进行检查。我该怎么办？
.icobutton {
font-size: 1.75em;
position: relative;
margin: 0;
padding: 0;
color: #c0c1c3;
border: 0;
background: none;
overflow: visible;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
width: 100%;
}
.icobutton__text {
font-size: .65em;
color: #a6a6a6;
position: absolute;
bottom: -1.25em;
left: 50%;
transform: translateX(-50%);
}
.icobutton svg {
left: 0;
}
.icobutton:hover,
.icobutton:focus {
outline: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<ol class="grid">
<li class="grid__item">
<button class="icobutton icobutton--thumbs-up checked">
<span class="icobutton__icon far fa-thumbs-up"></span>
<span class="icobutton__text icobutton__text--side">4</span>
</button>
</li>
</ol>driver.findElement(By.id("com.simplemobiletools.gallery:id/dir_thumbnail")).click();
driver.findElement(By.id("com.simplemobiletools.gallery:id/medium_thumbnail")).click();