次のようにアイデアは以下のとおりです。
aimationアニメーションと実行時間を設定し、このサイクルがあれば
、カスタムアニメーション@keyframes
と、デフォルトアニメーションは隠されたdiv要素を
イベント表示ブロックの実行をクリックします
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8" />
<タイトル>ドキュメント</ TITLE>
<リンクのrel = "スタイルシート" のhref = "https://www.layuicdn.com/layui/css/layui.css" />
<スクリプトSRC = "https://cdn.bootcss.com/jquery/2.1.3/jquery.js"> </ SCRIPT>
<スクリプトSRC = "https://www.layuicdn.com/layui/layui.js" タイプ= "テキスト/ javascriptの"> </ SCRIPT>
</ head>の
<身体>
<スタイルタイプ= "テキスト/ cssの">
.layui容器{幅：40％;高さ：400ピクセル、背景色：赤;表示：なし;変換：移動Y（100ピクセル）。
アニメーション：luandong .5s。
}
@keyframes luandong {
0％は、{変換：移動Y（-300pxを）;}
50％{変換：移動Y（-100px）;}
100％{変換：移動Y（100ピクセル）;}
}
</スタイル>
<ボタンクラス= "layui-BTN layui-BTN-危険">按钮</ボタン>
<ボタンクラス= "layui-BTN layui-BTN-無効">按钮2 </ボタン>
<DIV CLASS = "layui-容器B">
wqeqwe
</ div>
ます。<script type = "text / javascriptの">
$（ ""）。（機能をクリックしてください（）{
$（ "B "）。CSS（" 表示"、 "ブロック"）
$（ "身体"）。CSS（ "背景"、 "＃1 c3c3c3"）
}）
$（関数FUNCTION_NAME（引数）{
// $（ "A"）。クリックしてください（）
}）
</ SCRIPT>
</ BODY>
</ HTML>