Vue.js之CSS过渡


.xxx-enter-active {
  transition: all .3s ease;
}
.xxx-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.xxx-fade-enter,.xxx-leave-active {
  transform: translateX(10px);
}

这里出现的名叫xxx的同学，就是给过渡组件起的名字，这样vue就会到css中去找
前缀名为xxx的类，并应用到组件里面的元素上面。

这四个css的类的后缀名各不相同，分别是enter,leave,enter-active和leave-active

这四个后缀名分别代表进入过渡开始，离开过渡开始，进入过渡开始到进入过渡结，
离开过渡开始到离开过渡结束。



opacity:0;  transform:translateX(10px);
.boom-enter-actie{
  animateion: in .5s;
}
@keyframes in{
0%{
   transform: scale(2);  opacity:0;
}
50%{
   transform: scale(1.5);  opacity: 0.5;
}
}


CSS动画
要用到css3的animation
.boom-enter-active{//boom 是过渡名称 in,out是两个动画，动画写到进入和离开结束的class中
animation:in .5s;
}
.boom-leave-active{
animation:out .5s;
}
@keyframes  in {//in动画
0% {
    transform: scale(2);
  opactity:0;
  }
  50% {
    transform: scale(1.5);
opactity:0.5;
  }
  100% {
    transform: scale(1);
opactity:1;
  }
}
@keyframes  out {//out 动画
0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
opactity:0;
  }
}



css过渡说白了就是动态加上和去掉相应的class实现的，比如说下面这个小方块，
进入开始时，透明度是0（加上了 .xxx-fade-enter class造成的opacity=0），
中间过程又加上了(.xxx-enter-active）。进入结束时，过渡效果完成，透明度是1，
vue把上面加的class都去掉。离开开始时，透明度是1，中间过程加上（xxx-enter-active class）
此时元素的css样式如下：

transition: all .8s;
cubic-bezier(1.0,0.5,0.8,1.0);
opacity:0;
transform:translateX(10px);

过渡时间

在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果

在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)

下面的代码意味着元素在进入enter和离开leave时，持续时间都为1s，而无论在样式中它们的设置值为多少

<transition :duration="1000">...</transition>

也可以分别定制进入和移出的持续时间

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

比如，下面的代码中，进入和移出的效果都为animate.css里面的shake效果，但持续时间分别是0.5s和1s

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>    
  <transition  :duration="{ enter: 500, leave: 1000 }" 
name="xxx" enter-active-class="animated shake"  
leave-active-class="animated shake">
    <p v-if="show">小火柴的蓝色理想</p>
  </transition>
</div>

这里写图片描述

猜你喜欢