Vue009_过渡动画

vue 动画的理解

1) 操作 css 的 trasition 或 animation
2) vue 会给目标元素添加/移除特定的 class
3) 过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式

基本过渡动画的编码

1) 在目标元素外包裹<transition name="xxx">
2) 定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它

编码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to {opacity: 0;}/* 可以设置不同的进入和离开动画 */.slide-fade-enter-active {transition: all .3s ease;}.slide-fade-leave-active {transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0)}.slide-fade-enterm ,.slide-fade-leave-to {transform: translateX(10px);opacity: 0;}</style></head><body><div id="demo1"><button @click="show = !show">JD1</button><!-- 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。 --><transition name="fade"><p v-if="show">hello</p></transition></div><div id="demo2"><button @click="show = !show">JD2</button><transition name="slide-fade"><p v-if="show">hello</p></transition></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">new Vue({el: '#demo1',data: {show: true}})new Vue({el: '#demo2',data: {show: true}})</script></body>
</html>

结果展示

代码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.bounce-enter-active {animation: bounce-in .5s;}.bounce-leave-active {animation: bounce-in .5s reverse;}@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}</style></head><body><div id="test2"><button @click="show = !show">JD show</button><br /><transition name="bounce"><!-- inline-block => 该元素生成一个块元素框，该框与周围的内容一起流动，就好像它是单个内联框一样，并且行为类似于被替换的元素 --><p v-if="show" style="display: inline-block;">Look at me</p></transition></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#test2',data: {show: true}})</script></body>
</html>

结果展示

Vue009_过渡动画相关推荐

android 官方默认动画,Android动画一：Activity过渡动画详细实现原理
虽然 Android 5.0 之后推出了新的过渡动画方式,但通常只是用于特定的场合使用,activity.overridePendingTransition() 通用方式的过渡动画还是很常用. 原理分 ...
几行代码实现神奇移动的过渡动画
1.效果如图: 2.实现: 假设需求为如上图,点击ViewController01后,ViewController01上的两张图片,移动到ViewContoller02中,其实两个ViewContro ...
自定义Push和Pop过渡动画
一.效果和源码本文介绍如何实现一个NavigationController的自定义Push和Pop过渡动画,运行效果如下: 源码:https://github.com/dolacmeng/Trans ...
[iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
js修改display_Vue.js从零开始——过渡 / 动画效果（2）
题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了--这是因为不在老 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
react过渡动画效果的实现,react-transition-group
本文介绍react相关的过渡动画效果的实现有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果安装 cnpm install react-tran ...
Vue中的基础过渡动画原理解析
前言在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...

Vue009_过渡动画

vue 动画的理解

基本过渡动画的编码

编码示例

结果展示

代码示例

结果展示

Vue009_过渡动画相关推荐

最新文章

热门文章