コピー2019.04.12ぬにょす(挨拶)。Vue.jsにはトランジション/アニメーションのための仕組みが備わっています。今回は、CSSアニメーションライブラリのAnimate.cssと組み合わせて実装してみます。パッケージをインストールします。読み込むようにします。以下のような形で実装します。タグ、正確にはラッパーコンポーネントの子要素とします。変数を指定し、Toggleボタンで真偽値を切り替えています。定義されているクラスです。クラスの指定が必須です。実際の動きこんな感じになります。コンテンツを上下中央配置にしているので、要素の表示/非表示により描画領域が変動し、Toggleボタンが動いています。なりを指定することになります。コントロールするディレクティブが追加されたら有難いなぁと思うところではあります。提供している効果が確認できます。Animate.cssdaneden.github.io公式のVueトランジションのドキュメント。読みながら実際に手を動かしてみないと分からないタイプのドキュメントです(笑)。コピーみやびをフォローするみやびAmiiby.com関連記事Nuxt.jsNuxt.jsが便利すぎた件ぬにょす(挨拶)。WebアプリのフロントエンドにVue.js、バックエンドにRailsという構成でアレコレしていたのですが、Nuxt.jsならどっちもイケる事が分かって乗り換えました。カスタマイズするぬにょす(挨拶)。読...Nuxt.jsNuxt.jsのレイアウト/ビューをいじるぬにょす(挨拶)。カスタムレイアウトを追加し、ビューでそれを使うようにしてみます。ディレクトリにレイアウトを作成します。section.hero.is-pr...Nuxt.jsNuxt.jsで独自のページを表示するぬにょす(挨拶)。先日作成したNuxtアプリケーションにページを追加してみます。Nuxt.jsは規定のディレクトリ構造を持っています。...Nuxt.jsNuxt(Vue)でアイキャッチ画像を作るアプリを作ってみたぬにょす(挨拶)。ブログのアイキャッチ画像に、記事タイトルを重ねたいなぁと思って。それだけのためにGIMP使うのもなぁ...ってゆーモノグサが発動し。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。ホームVue.jsNuxt.jsサイト管理人みやび1978年1月生まれ。ブレない流されない寝つき悪い怠惰な三日坊主。インターネットがダイアルアップだった時代からPCを自作したりプログラミング言語を独学したりホームページを作ったりして今に至る。2015年まで某大手ITサービス会社でシステムエンジニアしてましたが、心がブラックになってしまい退職。昔取った杵柄で現在は塾講師をしてます。Reserved.メニューHOMEABOUTSITEMAPホーム検索トップサイドバーサイト管理人みやび1978年1月生まれ。ブレない流されない寝つき悪い怠惰な三日坊主。インターネットがダイアルアップだった時代からPCを自作したりプログラミング言語を独学したりホームページを作ったりして今に至る。2015年まで某大手ITサービス会社でシステムエンジニアしてましたが、心がブラックになってしまい退職。昔取った杵柄で現在は塾講師をしてます。(1)タイトルとURLをコピーしました。