アニメーション効果を使用してvueでスクロールイベントを実装する方法

一个新手
リリース: 2017-09-25 09:16:30
オリジナル
3488 人が閲覧しました

要件: ページをプルダウンし、上部にいくつかのメッセージが表示される場合、それを実装する方法は、最初にページのスクロール イベントを使用することを考えてから、イベントをどこに書き込むかを考えます。つまり、コードを見てください

<template>
  <p class="home">
    <p id="zz">
      <transition name="bounce">
        <ap v-show="aa"></ap>
      </transition>
      <app></app>
      <!--<lunBo></lunBo>-->
      <lunbotu id="lunbotu"></lunbotu>
      。。。。    </p>
  </p></template>
ログイン後にコピー

上記のコードの先頭には、ap コンポーネントのコンテンツが表示されるかどうかを決定するために使用されます。外部トランジションは、モジュールの速度を低下させるためにアニメーション効果を使用します。 。ここで注意する必要があるのは、遷移ではクラス属性ではなく name 属性が使用されるということです

<script>  
import ap from &#39;./app.vue&#39;
  import app from &#39;./header-app.vue&#39;
  import lunBo from &#39;./lunbo.vue&#39;
    ......  export default{
    data () {      
        return {        
        scroll: &#39;&#39;,        
        aa: false
      }
    },    components: {
      ap,
      app,
    ......
    },
    mounted () {      
    window.addEventListener(&#39;scroll&#39;, this.menu)
    },    
    methods: {
      menu () {        
      this.scroll = document.body.scrollTop        
      if (this.scroll >= 115) {          
      this.aa = true
        } else {          
        this.aa = false
        }
      }
    }
  }
</script>
ログイン後にコピー

ここでのコードはページスクロールイベントを処理するものです

<style>
  .bounce-enter-active {    
  animation: bounce-in .5s;  }
  .bounce-leave-active {    
  animation: bounce-out .5s;  }
  @keyframes bounce-in {
    0% {      
    transform: translateY(-85px);    }
    /*50% {*/
      /*transform: translateY(-45px);*/
    /*}*/
    100% {      
    transform: translateY(0);    }
  }  
  @keyframes bounce-out {
    0% {      
    transform: translateY(0);    }
    /*50% {*/
      /*transform: translateY(-45px);*/
    /*}*/
    100% {      
    transform: translateY(-85px);    }
  }</style>
ログイン後にコピー

を見てみましょう。上記のコードはアニメーション イベントを処理するためにここで使用されます

以上がアニメーション効果を使用してvueでスクロールイベントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!