网站首页两侧面板展开收起动画

最新推荐文章于 2024-04-11 15:07:41 发布

攻城狮羊羊

最新推荐文章于 2024-04-11 15:07:41 发布

阅读量208

点赞数

文章标签：动画 css3 前端

本文链接：https://blog.csdn.net/m0_67021283/article/details/128656927

版权

前言：实现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,