transition 属性

transition 属性是一个简写属性，用于设置四个过渡属性。

CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。
CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。

属性：

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
transition原理：
transition动画的实现是依靠css进行控制的,如果页面有多个transition就可以通过修改name属性,分别给不同的transition添加变换样式。

属性有：

v-enter：显示/插入前的效果
v-active-enter：显示/插入的过渡时间和函数
v-enter-to：显示/插入后的效果
v-leave：隐藏/移除前的效果
v-active-leave：隐藏/移除的过渡时间和函数
v-leave-to：隐藏/移除后的效果
在使用属性时，将v换成transiton标签中的name值

<template><div id="app"><!--     exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存--><!--     exclude="Detail"--><transition :name="trasitionName"><keep-alive exclude="Detail"><router-view class="Router" /></keep-alive></transition></div>
</template>

对于在过渡中切换的类名来说,如果你使用一个没有名字的 ,就 v-是这些类名的默认前缀。

如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。

3.使用

<template><div id="app"><!--     exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存--><!--     exclude="Detail"--><transition :name="trasitionName"><keep-alive exclude="Detail"><router-view class="Router" /></keep-alive></transition></div>
</template><script>
export default {name: "App", data() {return {trasitionName: "left-slide",};},watch: {$route(to, from) {//   console.log(to);if (to.name == "Detail") {this.trasitionName = "slide-left";} else if (to.name == "home") {this.trasitionName = "slide-right";}else{this.trasitionName = "";}},},
};
</script><style>
.Router {/* transition: all .8s ease; */position: absolute;left: 0;top: 0;width: 100%;
}.slide-left-leave {opacity: 1;
}
.slide-left-leave-to {transform: translateX(-100%);opacity: 0;
}
.slide-left-enter {opacity: 0;transform: translateX(100%);
}
.slide-left-enter-to {opacity: 1;
}.slide-right-leave {opacity: 1;
}
.slide-right-leave-to {transform: translateX(100%);opacity: 0;
}
.slide-right-enter {opacity: 0;transform: translateX(-100%);
}
.slide-left-enter-to {opacity: 1;
}
.slide-left-leave-active,
.slide-left-enter-active,
.slide-right-enter-active,
.slide-right-leave-active {transition: all 0.8s ease;
}
</style>

transition 属性相关推荐

css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
css 右上角翻开动画_css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(heigh ...
html的扇形代码导航,CSS3--利用transform和transition属性制作扇形导航
在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明. 一.transition属性说明接下来 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
css transtion不生效_CSS中transition属性不起作用的原因及解决方法
CSS中的transition属性可用于调整元素更改的时间,它可以像动画一样显示.虽然transition属性可以很方便的实现过渡效果,但是有时候可能会出现无效的情况,所以我们就需要来理解transi ...
transition属性详细讲解
transition属性的格式: transition:transition-property,transition-duration,transition-timing-function,trans ...
transition属性定义动画
CSS3新增属性:transition属性,可以定义简单动画! 下面给大家演示一个demo,抛砖引玉. 而且不需要使用 js! CSS代码如下 <style>.rbar.mobile{po ...
css3 transition属性造成文字抖动
解决方法: transition属性后面接着写 transform:translateZ(0)
css transtion不生效_CSS3 Transition属性使用详解
transition 属性是一个简写属性,用于设置四个过渡属性:transition-property transition-duration transition-timing-function t ...

transition 属性

transition 属性是一个简写属性，用于设置四个过渡属性。

属性：

属性有：

3.使用

transition 属性相关推荐

最新文章

热门文章