Wixのhiddenプロパティをhide関数、show関数でOn/Offすることで、エレメントの表示/非表示を切り替えることが可能です。
テキストの非表示(hide)
![hide1](https://sunagitsune.com/wp-content/uploads/2021/01/hide1-650x390.jpg)
まずボタン、イベントを作っていきます。テキストを非表示にする場合はhiddenプロパティをTrueにします。
hiddenプロパティは読み取り専用で、hidden = True;では動作しません。
hideメソッドを使い、$w(“#ID”).hide();のようにすることで、hiddenプロパティをTrueにできます。
hiddenプロパティは読み取り専用で、hidden = True;では動作しません。
hideメソッドを使い、$w(“#ID”).hide();のようにすることで、hiddenプロパティをTrueにできます。
![hide2](https://sunagitsune.com/wp-content/uploads/2021/01/hide2.jpg)
ボタンを押すと、
![hide3](https://sunagitsune.com/wp-content/uploads/2021/01/hide3.jpg)
テキストが消えます。
collapsedプロパティをTrueにした時とはちがい、間が詰められないのがポイントです。
テキストの表示(show)
![show](https://sunagitsune.com/wp-content/uploads/2021/01/show.jpg)
Showメソッドを使うと、hiddenプロパティをFalseにする=要素を表示することができます。
ここではIf文を使い、hiddenプロパティがTrueの場合はshowを、Falseの場合はhideを使って要素の表示/非表示を押すたびに切り替えます。
ここではIf文を使い、hiddenプロパティがTrueの場合はshowを、Falseの場合はhideを使って要素の表示/非表示を押すたびに切り替えます。
//Velo by Wix
if( $w("#ID").hidden ) {//もしプロパティがhidden = trueなら
$w("#ID").show();//hidden = falseに変更
}
else {//そうでなければ
$w("#ID").hide();//hidden = trueに変更
}
}
![show3](https://sunagitsune.com/wp-content/uploads/2021/01/show3.jpg)
コードを入力してプレビューで確認すると、ボタンを押すたびに、
![show4](https://sunagitsune.com/wp-content/uploads/2021/01/show4.jpg)
対象のエレメントが消えたり現れたりすることが確認できます。
show/hide関数に効果をつける
![show5](https://sunagitsune.com/wp-content/uploads/2021/01/show5.jpg)
関数の後ろの()内に効果を書き加えることで、アニメーションを加えることができます。
先ほどのコードをshow(“arc”)、hide(“arc”)に変更した場合、
先ほどのコードをshow(“arc”)、hide(“arc”)に変更した場合、
![arc](https://sunagitsune.com/wp-content/uploads/2021/01/arc.gif)
こういった動きをするようになります。
![fade](https://sunagitsune.com/wp-content/uploads/2021/01/fade.gif)
同様にarcをfadeに書き換えた場合、
![flip](https://sunagitsune.com/wp-content/uploads/2021/02/flip.gif)
以下flipの場合、
![float](https://sunagitsune.com/wp-content/uploads/2021/02/float-2.gif)
float、
![fold](https://sunagitsune.com/wp-content/uploads/2021/02/fold-1.gif)
fold、
![puff](https://sunagitsune.com/wp-content/uploads/2021/02/puff-2.gif)
puff、
![roll](https://sunagitsune.com/wp-content/uploads/2021/02/roll-1.gif)
roll、
![slide](https://sunagitsune.com/wp-content/uploads/2021/02/slide.gif)
slide、
![spin](https://sunagitsune.com/wp-content/uploads/2021/02/spin.gif)
spin、
![turn](https://sunagitsune.com/wp-content/uploads/2021/02/turn.gif)
turn、
![zoom](https://sunagitsune.com/wp-content/uploads/2021/02/zoom.gif)
zoom、となります。
他にbounce、glideというのがあるはずですが、うまくエフェクト動かなかったのでパスしてます。
他にbounce、glideというのがあるはずですが、うまくエフェクト動かなかったのでパスしてます。
上の各効果はさらにパラメータを編集することも可能です(公式ページ参照)。
![](https://sunagitsune.com/wp-content/uploads/2021/02/website-1624028_1280-160x90.png)
WixおよびVelo by Wixの使い方・関数・プロパティなどまとめ
Wix関連のまとめです。①公式のリファレンスが充実してるのと②Wix自体がまだ発展途上(バグも多い)のと③そこまでガッツリ使うわけではないのと④AdBlock入れてるとまともに動かない ので記事の充実圧力は低めですが、まあぼちぼち暇を見て増...
コメント