Vue 常用的过渡

Vue 常用的过渡 | 三毛

6 years ago

source link: https://jkchao.cn/article/59fe7e39836b695d8fffd542
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

2017.11.05 10:58 字数 1826 喜欢 28 评论 3

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

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

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

59fe7e39836b695d8fffd542

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

59fe7e39836b695d8fffd542

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

59fe7e39836b695d8fffd542

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