css3动画和vue动画

transfrom ： 转换

1、translate ： translate（x，y）有两个值，第一个是x轴，第二个是y轴
2、rotate: rotate(XXdeg) deg值为你要旋转的角度
3、scale: 缩放 scale(x, y) x为x轴，y为y轴, 它只是视眼可见的放大了，其实在dom元素中没有变化

transform: translate(500px,500px) scale(1.5,1.5) rotate(1080deg);

CSS3 动画

CSS3 有两种动画，扑间动画和帧动画
1、扑间动画 ：只能控制开头结尾（transition 过渡）
2、帧动画 ：除了控制开头结尾之外，还能控制动画的过程 （animation 动画）

一、transition ：过渡(CSS3) --扑间动画

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开

image.png

div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

二、animation：动画(CSS3) --帧动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;
@keyframes 动画名称 {
  0%{ 开始位置 }  
  50%{ 动画中 } 
  100%{  结束  }  
}或者
@keyframes 动画名称 {
  from{ 开始位置 }  
  to{  结束  }  
}

VUE 动画

v-enter [这是一个时间点] 是动画进入之前，元素的起始状态，此时还没有开始进入
v-enter-active [入场动画的时间段，动画的过程]
v-enter-to [这是一个时间点] 是动画进入之后，元素的终止状态，此时进入结束
v--leave [这是一个时间点] 是动画离开之前，离开起始止状态，此时还没有开始起开
v-leave-active [离场动画的时间段]
v--leave-to [这是一个时间点] 是动画离开之后，离开的终止状态，此时动画已经结束

image.png

Vue css过渡 transition

<template>
  <div>
      <transition>
          <div class="aaa" v-if='aaa'></div>
       </transition>
V 为页面所有的vue动画，如果有不同的动画效果可以给<transition>标签命名，例<transition name='bTranstion'>
     <transition name="bTranstion">
              <div class="bbb" v-if='bbb'></div>
     </transition>
  </div>
</template>
<script>
export default {
    data () {
        return {
            aaa: false,
            bbb: false
        }
},
}
</script>

<style scoped>
.aaa{
    height: 100px;
    width: 100px;
    background: hotpink;
}
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(200px)
}
.v-enter-active,
.v-leave-active{
    transition: all 1.5s ease;
}

.bbb{
    height: 100px;
    width: 100px;
    background: hotpink;
}
/* v 为页面所有的vue动画，如果有不同的动画效果可以给<transition>标签命名，例<transition name='bTranstion'> */
.bTranstion-enter,
.bTranstion-leave-to{
    opacity: 0;
    transform: translatey(200px)
}
.bTranstion-enter-active,
.bTranstion-leave-active{
    transition: all 1.5s ease;
}
</style>

Vue css动画 animation

<template>
  <div>
        <transition name="cAnimation">
                    <div class="ccc" v-if='ccc'></div>
        </transition>
  </div>
</template>

<script>
export default {
    data () {
        return {
            ccc: true,
        }
},
}
</script>

<style>
/* 2、 css动画 */
.ccc{
    height: 100px;
    width: 100px;
    background: black;
}
.cAnimation-enter-active{
    animation: c-animation 3s linear;
}
.cAnimation-leave-active{
    animation: c-animation 3s reverse;
}
@keyframes c-animation{
    25%{
        transform: translate(400px,0) scale(1,1) rotate(60deg);
    }
    50%{
        transform: translate(400px,400px) scale(1.5,1.5) rotate(120deg);
    }
    75%{
        transform: translate(0,400px) scale(1,1) rotate(240deg);
    }
}


</style>