您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue3.0 过度和动画

一、css基础动画 animation、@keyframes 的用法

菜鸟教程 animation 传送门 https://www.runoob.com/cssref/css3-pr-animation.html

  .animation{
    position: absolute;
    border: 1px solid red;
    animation: leftrightleft 10s infinite;
    transition: all 3s;
  }
  @keyframes leftrightleft {
    0% { left: 0; top: 0; } 
    10% { left: 100px; top: 100px; } 
    20% { left: 200px; top: 200px; } 
    30% { left: 300px; top: 300px; } 
    40% { left: 400px; top: 400px; } 
    50% { left: 500px; top: 500px; } 
    60% { left: 400px; top: 400px; } 
    70% { left: 300px; top: 300px; } 
    80% { left: 200px; top: 200px; } 
    90% { left: 100px; top: 100px; } 
    100% { left: 0; top: 0; } 
  }

二、css基础过渡 transition、

菜鸟教程 transition 传送门 https://www.runoob.com/cssref/css3-pr-transition.html

.transition {
	 transition: 3s background-color ease;
}

三、Vue3 基础制作过渡、动画效果

贴一下官网的图、
在这里插入图片描述

3.1 过渡最简单的实践:
利用 v-enter-from 和 v-enter-to

<style>
  .SSSSSS-enter-from{ transform: translateX(-100vw); } 
  .SSSSSS-enter-to{ transform: translateX(0); } 
  .SSSSSS-leave-from{ transform: translateX(0); }
  .SSSSSS-leave-to{ transform: translateX(-100vw); }
</style>

template:
 <button @click="getShow">啊哦</button>
 <transition name="SSSSSS">
 	<div v-show="isShow">消失隐藏</div>
 </transition>

3.2 动画的实践
利用 v-enter-active 配合 animation:

@keyframes comeout{
    0%{
        transform:translateX(50px)
    }
    100%{
        transform:translateX(-100px)
    }
}
.AAAAAAAA-enter-active{
	animation: comein 1s;
}
.AAAAAAAA-leave-active{
    animation : comeout 1s;
}

template:
 <button @click="getShow">啊哦</button>
 <transition name="AAAAAAAA">
 	<div v-show="isShow">消失隐藏</div>
 </transition>

未完待续…


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进