Vue中实现过渡动画
1.Vueで制御される要素にトランジションアニメーションを追加する方法
1.1アニメーション化する必要のある要素をトランジションコンポーネントに配置します
1.2トランジションコンポーネントの要素が表示されると、自動的に.v-enter /.v-enterが検索されます。 -active / .v- enter-toクラス名
遷移コンポーネントの要素が非表示になっている場合、自動的に.v-leave / .v-leave-active /.v-leave-toクラス名が検出されます
1.3必要なのは.v-enterおよび.v-leaveを入力するに
は-toでアニメーションの開始状態を指定します。.v-enter-activeおよび.v-leave-activeでアニメーションの実行状態を指定します。
遷移アニメーションはクラスで完了できます。
注：
1。複数の要素に追加
できるトランジションアニメーションは1つだけです。要素、複数の要素は無効です。
トランジションアニメーションを複数の要素に追加する場合は、複数のトランジションコンポーネントを作成する必要があります
。2。アニメーションの初期設定
デフォルトでは、アニメーションはありません。初めて入力するとき。
入力するとすぐにアニメーションを表示したい場合は、トランジションにappear属性を追加することで、
Vueに最初にアニメーションを表示する必要があることを伝えます。3
。方法
複数の異なる要素に異なるアニメーションを指定する異なる遷移アニメーションを実行する必要がある複数の異なる要素がある場合、Transitionに渡すことができます。名前
を指定して、「入力前/入力後/入力プロセス中」の対応するクラス名を指定します。離れる前/離れた後/離れる過程で」
さまざまな要素にさまざまな遷移アニメーションを実装する**
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.one-enter{
opacity: 0;
}
.one-enter-to{
opacity: 1;
margin-left: 500px;
}
.one-enter-active{
transition: all 3s;
}
.two-enter{
opacity: 0;
}
.two-enter-to{
opacity: 1;
margin-top: 500px;
}
.two-enter-active{
transition: all 3s;
}
</style>
<div id="app">
<button @click="toggle">我是按钮</button>
<transition appear name="one">
<div class="box" v-show="isShow"></div>
</transition>
<transition appear name="two">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
//1.创建一个Vue的实例对象
let vue = new Vue({
//2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
el:'#app',
//3.告诉Vue的实例对象,被控制区域的数据是什么
data:{
isShow:true
},
//专门用于存储监听事件回调函数
methods:{
toggle(){
this.isShow = !this.isShow
}
},
//专门用于定义计算属性的
computed:{
}
});
</script>