Vue过渡动画运用transition
2024-10-20 16:48:09
vue的过渡动画,主要是transition标签的使用,配合css动画实现的。官方文档css过渡
通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下来转换在x轴上位移的距离, transition包括的是位移的内。key是必须有的,用来标记位移的哪一个,这个方法有一点,用v-if时会频繁的建立销毁。name是你定义的名字必须有,和css里面的名字是保持一致的,你可以自定义名字。
使用它时有时候切换的并不是标签,而是一个组件,这时候应该使用transition-group来包括。
<template>
<div>
<div>
<span @click="show = 0">第一个</span>
<span @click="show = 2">第二个</span>
<span @click="show = 3">第三个</span>
</div>
<transition-group name="slide">
<div v-show="show == 0" key="0">第一个文本</div>
<div v-show="show == 2" key="2">第二个文本</div>
<div v-show="show == 3" key="3">第三个文本</div>
</transition-group>
</div>
</template>
<script>
export default {
data () {
return {
show:0
}
}
}
</script>
<style>
.slide-enter-active{
transition:all .5s linear;
}
.slide-leave-active{
transition:all .1s linear;
}
.slide-enter{
transform: translateX(-100%);
opacity: 0;
}
.slide-leave-to{
transform: translateX(110%);
opacity: 0;
}
</style>
最新文章
- 【翻译】jQuery是有害的
- chrome 不支持window.webkitNotifications.createNotification消息通知API了
- 为什么在soui中加载JPG文件失败
- 圆角卖萌式登录表单和width的百分比值
- UIView常见属性设置汇总
- [团队项目]sprint3 &; 团队贡献分
- Angular.js+Bootstrap实现手风琴菜单
- MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-1]
- c# spring aop的简单例子
- uva 1368
- 快速排序法QuickSort
- C++中Reference与指针(Pointer)的使用对比
- 写入XML文件
- POJ 3258 River Hopscotch(二分查找答案)
- Sass学习笔记(补充)
- 关于 String 自我理解
- @Html.LabelFor 如何直接添加CSS样式
- 关于 layer.mask = label.layer 出现空白情况
- java后台常用json解析工具问题小结
- HTTPS 通讯流程