animation transition 以及区别

<template>
<div class="player">
<transition name="normal"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="show">
<div class="songhead">
<i class="fa fa-chevron-left downicon"></i>
<p class="songname">从上往下</p>
<p class="songsingername">从上往下</p>
</div>

<div class="songbottom">
<p class="bottomone">从下往上</p>
<p class="bottomtwo">从下往上</p>
</div>

<div ref="cdWrapper">
小圆到大圆
</div>

</div>

</transition>

<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-show="show">Toggle-hello</p>
</transition>
</div>

<button @click="dianjitransition">
点击-transition
</button>
<div ref="dianjitransition" class="dianjitransition">dianjitransition</div>

<button @click="dianjianimation">
点击-animation
</button>
<div ref="dianjianimation">dianjianimation</div>

<!-- 只有transition和animation和有贝塞尔曲线
=============================
transition在自己元素的css发生某一改变时触发，比如hover click 控制触发的样式 时间 运动形式等
animation可以直接触发(默认)，或者在某一条件下加上animation样式从而触发(比如click) 控制触发的样式 时间 运动形式等

vue中的transition那个进入 退出时触发不同，name="fade"
https://cn.vuejs.org/v2/guide/transitions.html
=============================

transition初使css已经展示，需要根据已经设定好的 样式 时间 运动线 在css变化的时候触发
animation 如果没有加上animation move这个属性 那move里的所有样式都不会有 在加上的一瞬间触发

vue里的transion 渐入渐出效果
初始和结束都可以定义
默认定义的是中间稳定的css样式
中间运动的是 transition需要根据已经设定好的 样式 时间 运动线 和transition的用法一样，和animation没有关系
还需要v-show或者v-if才能显示出来效果

======
animation forwards如果没有的话会恢复到最初始的状态，不管中间经过几次的animation，这样就可以运动完成后消除回到初始状态
======
transition不能和animation似的，指定某个时间点是什么状态变化
transition只能指定这2s按照什么曲线走了这个流程，样式变化是1到2
animation可以指定2s按照什么曲线，2s中的哪个点有什么css变化，样式变化是1-2-3-4...

-->

</div>
</template>

<script>
import animations from 'create-keyframe-animation'

export default {
name: 'Player',
data () {
return {
msg: 'Welcome to Your Vue.js App',
isshow:true,
show: false,
}
},
mounted(){
setTimeout(()=>{
this.show=true //进来后页面html css都加载好后，再把show改为true，show默认为false
},20)
},
methods:{
enter(el, done) {
let x=50,y=50,scale=1;

let animation = {
0: {
transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
},
60: {
transform: `translate3d(0,0,0) scale(1.2)`
},
100: {
transform: `translate3d(0,0,0) scale(1)`
}
}

animations.registerAnimation({ //注册的是animation
name: 'move',
animation,
presets: {
duration: 400,
easing: 'linear'
}
})

animations.runAnimation(this.$refs.cdWrapper, 'move', done)
},
afterEnter() {
animations.unregisterAnimation('move')
this.$refs.cdWrapper.style.animation = ''
},
leave(el, done) {
this.$refs.cdWrapper.style.transition = 'all 0.4s';
let x=50,y=50,scale=1;

this.$refs.cdWrapper.style.transform = `translate3d(${x}px,${y}px,0) scale(${scale})`
this.$refs.cdWrapper.addEventListener('transitionend', done)
},
afterLeave() {
this.$refs.cdWrapper.style.transition = ''
this.$refs.cdWrapper.style.transform = ''
},
dianjitransition(){
let flag = (this.$refs.dianjitransition.className.split(' ')).indexOf('dianjitransitionclick');
if(flag!=-1){
console.log(flag)
this.$refs.dianjitransition.className='dianjitransition'
}else{
this.$refs.dianjitransition.className+=' dianjitransitionclick'
}
},
dianjianimation(){
let name = this.$refs.dianjianimation.className
console.log(name)
if(name==''){
console.log(1)
this.$refs.dianjianimation.className='dianjianimation'
}else if(name=='dianjianimation'){
console.log(2)

this.$refs.dianjianimation.className='dianjianimationcancel'
}else if(name=='dianjianimationcancel'){
console.log(3)

this.$refs.dianjianimation.className='dianjianimation'
}

},
},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">
.player{
@include posf;
@include top(0);
@include bottom(0);
@include left(0);
@include right(0);
background:gray;

.songhead{
@include posr;
@include top(0);
@include left(0);
@include w(750);
@include h(100);

.downicon{
@include posa;
@include top(20);
@include left(30);
@include fs(30);
color:orange;
z-index:3;
}

.songsingername{
@include posa;
@include top(0);
@include left(0);
@include w(750);
@include h(50);
@include fs(30);
color:#fff;
text-align:center;
}

.songname{
@include posa;
@include top(50);
@include left(0);
@include w(750);
@include h(50);
@include fs(30);
color:#fff;
text-align:center;
}
}

.songbottom{
@include posa;
@include bottom(20);
@include left(0);
@include w(750);
@include h(100);

.bottomone{
@include posa;
@include top(0);
@include left(0);
@include w(750);
@include h(50);
@include fs(30);
color:#fff;
text-align:center;
}
.bottomtwo{
@include posa;
@include top(50);
@include left(0);
@include w(750);
@include h(50);
@include fs(30);
color:#fff;
text-align:center;
}
}
}

.normal-enter-active, .normal-leave-active{
transition: all 0.4s;
.songhead{
transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
}
.songbottom{
transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
}
}

.normal-enter, .normal-leave-to{
opacity: 0;
.songhead{
transform: translate3d(0, -100px, 0);
}
.songbottom{
transform: translate3d(0, 100px, 0);
}
}

.normal-enter-to, .normal-leave{
opacity: 1;
.songhead{
transform: translate3d(0, 0, 0);
}
.songbottom{
transform: translate3d(0, 0, 0);
}
}

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

.dianjitransition{
transition:transform 2s,background 2s;
transform:translateX(10px);
background:orange;
}

.dianjitransitionclick{
transform:translateX(50px);
background:yellow;

}

.dianjianimation{
animation:animationmove 5s forwards;

}
.dianjianimationcancel{
animation:animationmovecancel 5s;

}
@keyframes animationmove{
0%{
transform:translateX(0px) scale(1);
background:orange;
}
50%{
transform:translateX(50px) scale(1.5);
background:yellow;
}
100%{
transform:translateX(100px) scale(1);
background:orange;
}
}

@keyframes animationmovecancel{
0%{
transform:translateX(100px) scale(1);
background:orange;

}
50%{
transform:translateX(50px) scale(1.5);
background:yellow;
}
100%{
transform:translateX(0px) scale(1);
background:orange;
}
}

</style>

=========

https://zhidao.baidu.com/question/1367897929684612819.html