css 踩坑记录

最新推荐文章于 2024-03-01 16:26:40 发布

sleeppingfrog

最新推荐文章于 2024-03-01 16:26:40 发布

阅读量236

点赞数

分类专栏： html5与css3 文章标签： CSS动画箭头折叠动画修复 forwards属性 Vue.js

本文链接：https://blog.csdn.net/baidu_41601048/article/details/127889014

版权

html5与css3 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

实现一个箭头点击折叠动画

 <div class="prod-group">
                  <div class="list-title">产品中心</div>
                    <div class="list-icon h-right" @click="toggleProd">
                          <i class="iconfont icon-awtight " :class="isCollapse?'arrow-down':'arrow-up'" ></i>
                    </div>
                </div>
                <transition name="fade">
                  <div class="prod-list" v-if="isCollapse">
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                        <div class="prod-item">11111111111111111</div>
                  </div>
                </transition>

css如下

.arrow-down{
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: down 0.3s ;
  
}
.arrow-up{
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: up 0.3s ;
}

@keyframes down{
  0%{
      transform: rotate(0deg);
  }
  100%{
      transform: rotate(90deg);
  }
}

@keyframes up{
  0%{
      transform: rotate(90deg);
  }
  100%{
      transform: rotate(0deg);
  }
}

原本以为正常，却发现点击以后虽然有动画但是马上又回到了初始值，最后发现问题出在没有设置animation的forwards属性

.arrow-down{
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: down 0.3s forwards;
  
}
.arrow-up{
  width: 16px;
  height: 16px;
  display: inline-block;
  animation: up 0.3s forwards;
}