Vuejsアニメーションを使用してスライド左効果を作成する

私はVuejsアニメーションについてのthis officialドキュメントを読んでいます。しかし、それはCSSのフックを使用して、私はフェードと異なる期間で要素を表示/消滅させることしかできません。Vuejsアニメーションを使用してスライド左効果を作成する

<div id="demo"> 
    <button v-on:click="show = !show"> 
    Toggle 
    </button> 
    <transition name="fade"> 
    <p v-if="show">hello</p> 
    </transition> 
</div> 


.fade-enter-active, .fade-leave-active { 
    transition: opacity .5s 
} 
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { 
    opacity: 0 
}

Vuejs Animationを使用してスライドエフェクトを作成するにはどうすればよいですか？ 1つのようにhere。出来ますか？いくつかのサンプルコードを提供してください。

出典

2017-03-17 Nicolas S.Xu

これは絶対にVueJSで行うことができます。下の例をご覧ください。あなたは2つの例を見ることができます.1つはあなたのケースに採用されたコードです（スライドさせる）。もう1つは単純な画像スライダーで、3秒間隔で画像の配列をループします。

ここで重要なことは、イメージ要素をforループにラップして強制的に要素を破棄することです。そうしないと、要素がDOMから削除されず、移行されない（仮想DOM）ためです。

VueJSでの遷移をよりよく理解するには、getting started guide - transition sectionをチェックアウトすることをお勧めします。偉大な例ここ

new Vue({ 
 
    el: '#demo', 
 
    data: { 
 
    message: 'Click for slide', 
 
    show: true, 
 
    imgList: [ 
 
    \t 'http://via.placeholder.com/350x150', 
 
     'http://via.placeholder.com/350x151', 
 
     'http://via.placeholder.com/350x152' 
 
    ], 
 
    currentImg: 0 
 
    }, 
 
    mounted() { 
 
    \t setInterval(() => { 
 
    \t this.currentImg = this.currentImg + 1; 
 
    }, 3000); 
 
    } 
 
})

#demo { 
 
    overflow: hidden; 
 
} 
 

 
.slide-leave-active, 
 
.slide-enter-active { 
 
    transition: 1s; 
 
} 
 
.slide-enter { 
 
    transform: translate(100%, 0); 
 
} 
 
.slide-leave-to { 
 
    transform: translate(-100%, 0); 
 
} 
 

 
.img-slider{ 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 200px; 
 
    width: 400px;: 
 
} 
 

 
.img-slider img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>VueJS 2.0 - image slider</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body> 
 
    <div id="demo"> 
 
     <button v-on:click="show = !show"> 
 
     Toggle 
 
     </button> 
 
     <transition name="slide"> 
 
     <p v-if="show">{{message}}</p> 
 
     </transition> 
 
     <h3> 
 
     Img slider 
 
     </h3> 
 
     <transition-group tag="div" class="img-slider" name="slide"> 
 
     <div v-for="number in [currentImg]" v-bind:key="number" > 
 
     <img :src="imgList[Math.abs(currentImg) % imgList.length]"/> 
 
     </div> 
 
     </transition-group> 
 
    </div> 
 
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </body> 
 

 
</html>

出典

2017-03-20 10:45:55 Sicky

ねえ、これに感謝！質問は1つの方向にスライドするだけです。どのようにして、左右どちらかに画像をスライドする2つの矢印を左に1つ、右に1つを許可するにはどうすればいいですか？ – Benny

Vuejsアニメーションを使用してスライド左効果を作成する

答えて

関連する問題