转场动画：动画效果 css 动画 animate.css

实现动画的方式

<template><button @click="show = !show">改变</button><!-- 1..css1.使用transition组件包裹组件2.会自动在适当的时机,给元素加上6个类名进入：v-enter-from : 进入前v-enter-to : 进入后v-enter-active : 整个进入的过程离开：v-leave-from : 进入前v-leave-to : 进入后v-leave-active : 整个进入的过程3.加name属性 name ="fade"进入：fade-enter-from : 进入前fade-enter-to : 进入后fade-enter-active : 整个进入的过程离开：fade-leave-from : 进入前fade-leave-to : 进入后fade-leave-active : 整个进入的过程--><Transition name="fade"><div v-show="show">方法一css</div></Transition><!-- 2..使用动画 --><Transition name="run"><div v-show="show">方法二动画</div></Transition><!-- 3..使用插件 --><!-- yarn add animate.cssmain.js中引入 import 'animate.css'--><!--  利用animate的动画  将进入动画类名指定成animat.css 的动画类名，即可复用动画--><Transitionname="run"enter-active-class="animate__animated animate__bounceInDown"leave-active-class="animate__animated animate__bounceOutDown"><div v-show="show">使用插件</div></Transition>
</template><script>
import { ref } from 'vue'
export default {setup () {const show = ref(true)return {show}}
}
</script><style scoped>
div {width: 100px;height: 100px;background-color: red;/* 在显示隐藏的时候有动画效果 *//* vue的动画效果 */
}
/* 转场动画 --1 用css过渡实现 */
/* .fade-enter-from,
.fade-leave-to {opacity: 0;transform: translateX(-100%);
}
.fade-enter-active,
.fade-leave-active {transition: all 3s;
}
.fade-enter-to,
.fade-leave-from {opacity: 1;transform: translateX(0%);
} */
/*  */
/* 转场动画 --2 用动画实现 */
@keyframes shan {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}
}
/* 配合动画 run-enter-active run-leave-active */
.run-enter-active {animation: shan 0.3s;
}
.run-leave-active {/* animation-direction: alternate;// 交替 */animation: shan 0.3s reverse;
}
</style>

css样式
// 离开淡出动画
.fade {&-leave {&-active{position: absolute;width: 100%;transition: opacity 5s .2s;z-index: 1;}&-to {opacity: 0;}}
}

转场动画：动画效果 css 动画 animate.css相关推荐

html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
html css留言板特效,JS模拟留言板部分动画效果使用了 animate.css
留言板 *{ margin: 0; padding: 0; } #warp{ background: url(img/14.jpg) no-repeat center fixed; margin: 0 ...
小程序仿安卓动画滑动效果滑动动画效果实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 源码 var start_clientY; //记录当前滑动开始的值 var end_clientY ...
Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果
1. 使用过渡类名实现动画 v-enter: 进入之前元素的起始状态,还没有进入 v-enter-to: 定义进入过渡的结束状态 v-enter-active:定义进入过渡生效时的状态 v-leave ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴, 大部分都没 ...
animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

转场动画：动画效果 css 动画 animate.css

实现动画的方式

转场动画：动画效果 css 动画 animate.css相关推荐

最新文章

热门文章