十五.vue动画与过滤器

博客介绍了Vue相关知识,包括transition动画,transition组件可控制单组件状态切换,控制列表动画可用transition-group组件;还提到transition结合动画只需记住特定样式类;此外,介绍了过滤器,它能在渲染数据时对数据进行过滤加工。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


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

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 }}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值