前言:实现2侧面板进入时候动画效果出现,点击收起两侧面板消失。因为是第一次写动画用了好长时间我的第一步研究方向错了使用了transform-origin,后来使用了forwards。
1、实现的效果是:
2、实现代码 CSS
/* 动画特效 */
.lefanimeHome {
animation: leftHomeCssHome 0.6s forwards;
}
.lefanimeHome1 {
animation: leftHomeCssHome1 0.6s forwards;
}
@keyframes leftHomeCssHome { //展开
from {
transform: translate(-105%, 0);
}
to {
transform: translate(0, 0);
}
}
@keyframes leftHomeCssHome1 {//消失
from {
transform: translate(0, 0);
}
to {
transform: translate(-105%, 0);
}
}
3.动态绑定 STYLE/JS
动态class :class="animationDropFold ? 'lefanimeHome' : 'lefanimeHome1'"
点击事件 @click="animationDropFold=true" @dblclick="animationDropFold=false"
data中 animationDropFold:true,