transition动画
transition组件 控制 单组件(标签)状态切换
注意:
有一种情况可以同时写多个元素,就是使用v-if v-else-if v-else等控制
前提:永远不可能同时出现两个
如果 想要控制 列表动画 (同时控制多个元素)使用 transition-group组件 用法相同
1.给需要过渡的box使用transition容器包裹,v-if是必须的
<transition name="ani">
<组件 v-if="xxx"/>
</transition>
入场动画:
.ani-enter 定义 入场初始的状态
.ani-enter-active 定义 初始状态到最终显示状态中间的 过渡效果
出场动画
.ani-leave-to 定义 出场最终的状态
.ani-leave-active 定义 出场初始状态 --> 最终状态中间的过渡效果
如果transition组件 通过条件渲染 包裹多个元素
<transition name="ani" mode="out-in">
<组件 v-if="xxx" key="1"/>
<组件2 v-else key="2">
</transition>
1.应该定时mode属性
因为此种情况下,出场和入场会同时进行
mode定义出场和入场的 先后顺序 默认是 同时进行
可选值:
out-in 先出去 再进来 推荐使用
in-out 先进来 再出去
2.定义key值,且key不能相同
//例:
<transition name="ani" mode="out-in">
<div class="box" v-if="isshow" key="1"></div>
<div class="box2" v-else key="2"></div>
</transition>
transition结合动画
只需要记住 v-enter-active 和 v-leave-active即可,全部内容均写在style里
定义动画
@keyframes 动画名字{
0%{}
25%{}
50%{}
75%{}
100%{}
}
animation-name
animation-duration
animation-delay
animation-timing-function ease liear
- direction normal reverse altername alternate-reverse
- count number infinite
fill-mode 填充模式 forward backward both
play-state paused running
animation:name duration [delay] 后面顺序随便
transition 动画结合 animate.css动画库
css3动画库
例
@keyframes ani{
0%{
transform: scale(1) translateX(-500px) rotate(180deg);
}
25%{
transform: rotate(180deg) scale(1.5) translateX(-250px);
}
50%{
transform:rotate(0deg) scale(2) translateX(0);
}
75%{
transform:rotate(0deg) scale(1) translateX(0);
opacity: 0.5;
}
100%{
transform:rotate(0deg) scale(1) translateX(0);
opacity: 1;
}
}
.ani-enter-active{
animation: ani 2s;
}
.ani-leave-active{
animation: ani 2s reverse;
}
组件:
<div>
<button @click="change">{{isshow?"隐藏":"显示"}}</button>
<transition name="ani">
<div class="box" v-if="isshow"></div>
</transition>
</div>
过滤器
{{data中数据}} 渲染数据 过滤器在渲染数据的时候,可以过滤(加工一下)输出
参数一:过滤器中的data数据
参数二:传过来的参数
全局过滤器
Vue.filter("过滤器名字",(v)=>{
return "$"+v
})
v是data数据
例
Vue.filter("change",(v,c)=>{
return "$" + v +c
})
局部过滤器
let home={
filters:{
"过滤器名字":(v)=>{
return v+xxx;
}
}
}
// 使用过滤器
{{ num | 过滤器名字 }}
// 使用过滤器并传参
{{ num | 过滤器名字(...params) }}
// 过滤器串联
{{ num | 过滤器1 | 过滤器2 | 过滤器3 }}