vueページはアニメーションの移行を切り替えて、とてもかっこいいです!
897 ワード
次のCSSコードを入口APPに置く.VUEの中
下のラベルを包んで
このラベル
次のようになります.
それから効果を見て、自分でアニメーションの効果を修正することができます;
.slide-fade{
position: fixed;left:0;right: 0;
width: 100%;
background-color: white;
}
.slide-fade-enter, .slide-fade-leave-to
{
left:0;top: 0;right: 0;
position: absolute;
transform:translateX(-500px) translateY(-500px) rotate(-150deg) scale(0.5);
opacity:1;
}
.slide-fade-enter-active {
background-color: white;
transition: all 0.6s ease;
}
.slide-fade-leave-active {
transition: all 0.7s ease;
background-color: white;
transform:translateX(500px) translateY(500px) rotate(150deg) scale(1) ;
z-index: 100;
}
下のラベルを包んで
このラベル
次のようになります.
それから効果を見て、自分でアニメーションの効果を修正することができます;