transition标签 vue动画

一、<transition> 　　使用transition标签包裹，

<transition>
      <div class="page-login--layer" v-show="show"></div>
</transition>       
 　　　　/*v-enter 是进入之前，元素的起始状态*/
        /*v-leave-to 离开之后动画的终止状态*/
.v-enter, .v-leave-to {
    opacity: 0; /*透明度*/
    transfrom: translateX(150px);
}

        /*入场(离场)动画的时间段   */
.v-enter-active, v-leave-active {
    tansition: all 0.8s ease;
}    

// 带有名字的transition
<transition name="myTransition">
      <div class="page-login--layer" v-show="show"></div>
</transition>

.myTransition-enter,
.myTransition-leave-to {
  opacity: 0;
  transform: translateX(150px);
}
.myTransition-enter-active,
.myTransition-leave-active {
  transition: all 0.8s ease;
}

二、<transiton-group> 使用transition-group包裹的标签

　　在实现列表过渡时，如果需要过渡的元素是通过 v-for 渲染出来的，不能使用 transition 包裹，而是需要使用 transition-group

　　若需要为 v-for 循环创建的元素设置动画，必须为每个元素绑定 :key 属性

<transition-group tag="ul">
    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
    </li>
</transition-group>        

.v-enter,.v-leave-to{
    opacity: 0;
    transform: translateY(80px);
}

.v-enter-active,.v-leave-active{
     transition: all 0.6s ease;
}

        /*v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */

.v-move{
     transition: all 0.6s ease;
}
.v-leave-active{
    position: absolute;
}    

ps: 参考https://blog.csdn.net/weixin_42218847/article/details/81474923

// 带有名字的transition-group

<transition-group name='flip-list' tag='ul' mode='in-out'>
    <li v-for='item in items' :key='item' class='flip-list-item'>      
        {{item}}
    </li>
</transition-group>

样式：
.flip-list-enter,.flip-list-leave-to {
    opacity:0;
    transform: translateX(50px);
}

.flip-list-enter-active,.flip-list-leave-active {
    transition: all 1s ease;
}

.flip-list-move {
    transition: all 1s;
}
/**
 * 要让删除的元素先脱离文档流，旁边的元素才能过渡过来
 */
.flip-list-leave-active {
    position:absolute;
}

三、element UI同时也内置了过度动画

https://element.eleme.cn/#/zh-CN/component/transition

提供 el-fade-in-linear 和 el-fade-in 两种效果。

zoom 缩放：
    提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。

fade 淡入淡出
    提供 el-fade-in-linear 和 el-fade-in 两种效果。

collapse 展开折叠
    使用 el-collapse-transition 组件实现折叠展开效果。

<transition name="el-fade-in-linear"> 
    <div v-show="show" class="transition-box">
        .el-fade-in-linear
    </div> 
</transition> 

<transition name="el-fade-in"> 
    <div v-show="show" class="transition-box">
        .el-fade-in
    </div>
</transition>

四、transition、transform、translate的区别和联系

　　1. transform 是 转换 ，例如位移，缩放和旋转，位移函数名就是translate，translate是transform的一部分。
　　2. transition是过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。而transform是没有动画效果，你改变了它的值，元素的样子就唰的改变了。

 　　

transition 基本用法：

　　transition： [属性名] [持续时间] [速度曲线] [延迟时间]

　　transition： all 2s ease 0.5s; // 所有属性动画

　　transition： height 2s, width 3s; // 给多个属性多个过渡

transform： 转换，基本用法

　　transform：[转换函数]；

　　2D转换中，通常有，位移translate(x,y), 缩放scale(x,y), 旋转rotate(angle)

　　　　transform: translate(10px, 10px) rotate(10deg); // 向下向右平移10像素，并顺时针旋转10度

　　　　attention: 转换函数之间可没有逗号。

ps:参考https://www.jianshu.com/p/80f6051389bd

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    width: 120px;
    height: 120px;
}
如果使用transition监听基本属性，例如height或width等，其值在发生改变时就会对文档流产生影响，比如下图，鼠标悬停的div长宽变化会把其他的div给“挤开”，甚至最边上的还挤到了下一行。并且，可以长宽属性在发生变化时元素的固定点不是中心，而是左上角，


因为transform只会影响当前元素的状态，达到类似position: relative;的效果，而且transform是默认基于元素的中心进行转换的，就算想改的话也可以使用transform-origin属性进行修改

.box {
    width: 100px;
    height: 100px;
    transition: all 0.4s ease;
}

.box:hover {
    transform: scale(1.2, 1.2);
}

 

 

标签：动画,vue,el,transition,transform,leave,enter,active
来源： https://www.cnblogs.com/chuanmin/p/15872094.html