如何在vuejs2中设置窗体元素的动画

我有一个登录屏幕，我想动画。页面上大约有3组表单元素。我的目标是让表单元素一次显示一个div键组，间隔1秒淡入。我只看到第一组。我如何才能让div组在彼此之后出现

  <form class="form-signin" @submit.prevent="login">

---

这就是我在我的应用程序中所做的

newvue({
el:“#应用程序”，
数据（）{
返回{
间隔：空
}
},
安装的（）{
这个.showBlocs（）
},
方法：{
showBlocs（）{
设els=document.queryselectoral（'.bloc'）
console.log（els[1]）
设i=0
this.interval=setInterval（（）=>{
els[i].classList.add（'slide-bottom-fade-in'）
我++
如果（i==els.长度）{
clearInterval（this.interval）
}
}, 200)
}
},
在…之前{
clearInterval（this.interval）
}
})

.bloc{
背景：水鸭；
不透明度：0；
高度：100px；
宽度：100px；
显示：内联块；
}
.滑底淡入{
动画：滑动底部淡入轻松1s；
动画迭代次数：1；
变换原点：50%50%；
动画填充模式：正向；
/*当规范完成时*/
-webkit动画：幻灯片底部淡入轻松1s；
-webkit动画迭代计数：1；
-webkit转换来源：50%50%；
-webkit动画填充模式：正向；
/*铬16+，Safari 4+*/
-moz动画：幻灯片底部淡入轻松1s；
-moz动画迭代次数：1；
-moz变换原点：50%50%；
-moz动画填充模式：正向；
/*FF 5+*/
-o型动画：滑动底部淡入轻松1s；
-o-动画-迭代-计数：1；
-o-变换原点：50%50%；
-o-动画-填充模式：正向；
/*尚未实施*/
-ms动画：滑动底部淡入轻松1s；
-ms动画迭代次数：1次；
-ms转换来源：50%50%；
-ms动画填充模式：正向；
/*IE 10+*/
不透明度：0；
不透明度：1~9；
}
@关键帧滑动底部淡入{
0% {
不透明度：0；
转换：转换（0px，-40px）；
}
100% {
不透明度：1；
转换：转换（0px，0px）；
}
}
@-moz关键帧滑动底部淡入{
0% {
不透明度：0；
-moz变换：平移（0px，-40px）；
}
100% {
不透明度：1；
-moz变换：平移（0px，0px）；
}
}
@-webkit关键帧滑动底部淡入{
0% {
不透明度：0；
-webkit转换：转换（0px，-40px）；
}
100% {
不透明度：1；
-webkit转换：翻译（0px，0px）；
}
}
@-o关键帧滑动底部淡入{
0% {
不透明度：0；
-o变换：平移（0px，-40px）；
}
100% {
不透明度：1；
-o变换：平移（0px，0px）；
}
}
@-ms关键帧滑动底部淡入{
0% {
不透明度：0；
-ms变换：平移（0px，-40px）；
}
100% {
不透明度：1；
-ms变换：平移（0px，0px）；
}
}
.向左滑入淡入{
动画：滑动左淡入轻松1s；
动画迭代次数：1；
变换原点：50%50%；
动画填充模式：正向；
/*当规范完成时*/
-webkit动画：幻灯片向左淡入轻松1s；
-webkit动画迭代计数：1；
-webkit转换来源：50%50%；
-webkit动画填充模式：正向；
/*铬16+，Safari 4+*/
-moz动画：幻灯片向左淡入，轻松1s；
-moz动画迭代次数：1；
-moz变换原点：50%50%；
-moz动画填充模式：正向；
/*FF 5+*/
-o型动画：幻灯片向左淡入轻松1s；
-o-动画-迭代-计数：1；
-o-变换原点：50%50%；
-o-动画-填充模式：正向；
/*尚未实施*/
-ms动画：幻灯片向左淡入轻松1s；
-ms动画迭代次数：1次；
-ms转换来源：50%50%；
-ms动画填充模式：正向；
/*IE 10+*/
不透明度：0；
不透明度：1~9；
}

只能为一个元素设置动画。但是，您可以使用多个

元素。在您的情况下，您可以使用3个

元素来获得最终结果

由于要在页面加载时查找动画，因此可以使用

元素中提供的

显示

属性<代码>出现将在页面加载后触发动画

如果没有

显示

属性，则需要使用

v-if

来启动动画

如果您具有

显示

属性，则页面加载后默认情况下，vuejs将触发

*-输入活动

下的动画。您还可以覆盖默认行为。检查我在这个答案末尾提供的参考url

下面是示例代码

<template>
  <div>
    <transition name="fade1" appear>
      <div class="fadecontent">
        hello world1
      </div>
    </transition>
    <transition name="fade2" appear>
      <div class="fadecontent">
        hello world2
      </div>
    </transition>
    <transition name="fade3" appear>
      <div class="fadecontent">
        hello world3
      </div>
    </transition>
  </div>
</template>

<style>
  .fadecontent{
    border: 2px solid black;
    background-color: aqua;
    padding:20px;
    opacity: 1;
  }
  .fade1-enter,.fade2-enter,.fade3-enter{
    transform: translateX(20px);
    opacity: 0;
  }
  .fade1-enter-active{
    transition: all 1s ease;
  }
  .fade2-enter-active{
    transition: all 1s ease 1s;
  }
  .fade3-enter-active{
    transition: all 1s ease 2s;
  }

  .fade1-leave-active,.fade2-leave-active,.fade3-leave-active{
    opacity: 0;
    transform: translateX(20px);
  }
  .fade1-leave-active{
    transition: all 1s ease;
  }
  .fade2-leave-active{
    transition: all 1s ease 1s;
  }
  .fade3-leave-active{
    transition: all 1s ease 2s;
  } 
</style>

你好，世界1
你好，世界2
你好，世界3
.时尚内容{
边框：2件纯黑；
背景色：浅绿色；
填充：20px；
不透明度：1；
}
.fade1回车、.fade2回车、.fade3回车{
转换：translateX（20px）；
不透明度：0；
}
.fade1进入活动状态{
过渡：所有的1容易；
}
.fade2进入活动状态{
过渡：所有1都轻松1；
}
.fade3进入激活状态{
过渡：所有1s缓解2s；
}
.fade1保持激活状态，.fade2保持激活状态，.fade3保持激活状态{
不透明度：0；
转换：translateX（20px）；
}
.fade1保持活动状态{
过渡：所有的1容易；
}
.fade2保持活动状态{
过渡：所有1都轻松1；
}
.fade3保持活动状态{
过渡：所有1s缓解2s；
} 

这并不是取得这一结果的唯一途径。您还可以使用普通的

html css js

来制作相同场景的动画

参考

---

在浏览器中呈现组件时，希望key=“1”、key=“2”、key=“3”逐个出现，是吗？想象一个包含三个元素的表单。每个表单元素逐渐消失在视图中，直到可以看到所有三个。像那样。检查我的答案“杰西太棒了”神圣。这个解决方案也是非常Vue-ish，所以我想用这个。是的

  .fade {
    backface-visibility: hidden;
    z-index: 1;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to  {
    opacity: 0;
  }

<template>
  <div>
    <transition name="fade1" appear>
      <div class="fadecontent">
        hello world1
      </div>
    </transition>
    <transition name="fade2" appear>
      <div class="fadecontent">
        hello world2
      </div>
    </transition>
    <transition name="fade3" appear>
      <div class="fadecontent">
        hello world3
      </div>
    </transition>
  </div>
</template>

<style>
  .fadecontent{
    border: 2px solid black;
    background-color: aqua;
    padding:20px;
    opacity: 1;
  }
  .fade1-enter,.fade2-enter,.fade3-enter{
    transform: translateX(20px);
    opacity: 0;
  }
  .fade1-enter-active{
    transition: all 1s ease;
  }
  .fade2-enter-active{
    transition: all 1s ease 1s;
  }
  .fade3-enter-active{
    transition: all 1s ease 2s;
  }

  .fade1-leave-active,.fade2-leave-active,.fade3-leave-active{
    opacity: 0;
    transform: translateX(20px);
  }
  .fade1-leave-active{
    transition: all 1s ease;
  }
  .fade2-leave-active{
    transition: all 1s ease 1s;
  }
  .fade3-leave-active{
    transition: all 1s ease 2s;
  } 
</style>