vue学習ノートのVueの中のcssアニメーションの原理の簡単な例

2015 ワード

Vue アニメ

本論文の実例はVueの中のcssアニメーションの原理を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
transionが要素を包むと、vueは自動的に要素のcssパターンを分析して、アニメーションプロセスを構築します。
そして、私たちはスタイルを定義する必要があります。
vueの中のcssアニメーションは、実はある時点で、要素にcssスタイルをもう一つ追加して表現しました。
v-if、v-show、ダイナミックコンポーネントは遷移効果を実現することができます。
transionにnameを定義していないなら、vueでデフォルトは.v-enter、v-leave-toです。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue css    </title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity 1s;
    }
  </style>
</head>
<body>
<div id="app">
  <transition name="fade">
    <div v-if="show">hello world!</div>
  </transition>
  <button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleBtnClick: function () {
        this.show = !this.show
      }
    }
  })
</script>

実行結果:

関心のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRunは上記のコードの運行効果をテストします。
ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。

WeChatウィジェットがオーディオファイルの再生進捗を実現するための例示的なコード

Vueコンポーネント化開発の汎用型ポップアップフレームの実現