Vue 常用的过渡

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000011862314

文章标签：

#javascript #ViewUI

本文介绍了如何在Vue.js中实现不同类型的过渡动画效果，包括淡入淡出、水平滑动等，并通过具体代码示例展示了如何自定义CSS过渡属性来控制动画行为。

前言

不涉及理论知识，请参考 https://cn.vuejs.org/v2/guide... ;
不使用第三方库，如 Animate.css, Velocity.js ;
贝塞尔曲线（cubic-bezier），http://yisibl.github.io/cubic... 。

正文

fade（淡入淡出），大概是最常见的：

.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s; 
}
  
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

vue-hackernews 翻页：

 .slide-left-enter,
 .slide-right-leave-to {
  opacity: 0;
  transform: translate(-30px, 0);
}

.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate(-30px, 0);
}

Element 展开折叠 :
源码：https://github.com/ElemeFE/el...

btn ：

<template>
  <div>
    <transition-group tag="div" name="btn">
      <button key="1">a</button>
      <button key="2">b</butotn>
    </transition-group>
  </div>
<template>
  
<style>
.btn-enter-active,
.btn-leave-active {
  transition: all .5s; 
}
  
.btn-enter,
.btn-leave-active {
  opacity: 0;
  transform: translateX(30px); 
}
  
.btn-move {
  transition: all .5s; 
}
  
.btn-leave-active {
  position: absolute; 
}
</style>

用于面包屑：