css动画效果

1.animate.css 元素库

用了animate这个库哈 这个库很粗糙 只演示了在单个元素上增加单个动画效果
就是例如 单纯的只有元素出现的时候展示效果 或者元素离开的时候展示效果

那么同时需要两种效果怎么写呢？
直接加css肯定是不行的 同时只会生效一种动画

那么我这里就使用了定时器和另外一个变量来控制
总计两个变量

      <div class="timerclass"
           :class="showtype==1?'animate__animated animate__fadeOutDown':'animate__animated animate__fadeInUp'"
           v-show="isshowTimer">
        <Timer :realtime="realtime"></Timer>
      </div>

  methods: {
    changestate () {
      this.showtype = this.showtype == 1 ? 0 : 1
      this.timeOut = setTimeout(() => {
        this.isshowTimer = !this.isshowTimer
      }, 500);
    },
   }

changestate事件触发 isshowTimer变量来控制显示和隐藏
showtype利用class属性自由增加和移除对应的animate样式 就可以了
至于setTimeout 是为了延迟元素的隐藏 让动画效果有时间展示完毕

2.方框滚动

    #tableitem-biao {
      // animation: scroll 10s linear infinite;
      overflow: hidden;
      overflow-y: auto;
      height: calc(100% - 41px);
      width: 100%;
    }

    #tablebox {
      width: 100%;
      height: auto;
    }

	中间嵌套一层tablebox盒子  里面还有细分的每一项


    ScrollUp2 () {
      var box = document.getElementById("tableitem-biao");
      var con1 = document.getElementById("tablebox");

      if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
    },
    mouseLeave2 (index) {
      // this.$refs.tooltip2[index].handleClosePopper();
      this.timer2 = setInterval(this.ScrollUp2, 50);
    },
    mouseOver2 (index) {
      if (this.timer2) {
        clearInterval(this.timer2);
        // this.$refs.tooltip2[index].handleShowPopper();
      }
    },

  <div id="tableitem-biao">
    <div id="tablebox">
      <div id="tableitem-xiang" v-for="(item,index) in tablelist" :key="index" @mouseover="mouseOver2(index)" @mouseleave="mouseLeave2(index)">
        <el-tooltip effect="dark" :content="`${item.name}`" placement="top">
          <div class="xiang-item">{{item.name}}</div>
        </el-tooltip>
        <div class="xiang-item flxclass">
          {{item.level}}
        </div>
        <div class="xiang-item">{{item.leder}}</div>
      </div>
    </div>
  </div>

上面是表格类的竖着滚动

下面是横向的滚动

html

            <div id="TongZhi">
              <div class="imgclass">
                <img src="./../../../../static/img/4KHomePage/4K_TongZhi.png" alt="" />
              </div>
              <div class="header-notice-marquee">
                <span class="header-marquee-item1">截止昨日，系统登记管网巡查人员119人，完成巡查记录487次，巡查登记问题796个。</span>
                <span class="header-marquee-item2">截止昨日，系统登记管网巡查人员119人，完成巡查记录487次，巡查登记问题796个。</span>
              </div>
            </div>

css

    #TongZhi {
      width: calc(100% - 20px);
      margin-left: 20px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      height: 30px;
      img {
        width: 26px;
        height: 23px;
        vertical-align: middle;
      }

      .header-notice-marquee {
        height: 100%;
        width: calc(100% - 26px);
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;

        span {
          padding: 0 26px;
          position: absolute;
          left: 26px;
          font-size: 24px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          color: #ffc73f;
          margin-left: 5px;
          overflow: hidden;
        }
      }

      .header-marquee-item1 {
        animation: marquee1 15s linear 8;
      }

      .header-marquee-item2 {
        animation: marquee2 15s linear 8;
      }

      .header-notice-marquee:hover {
        animation-play-state: paused;
      }

      @keyframes marquee1 {
        0% {
          left: 4%;
        }
        100% {
          left: -150%;
        }
      }

      @keyframes marquee2 {
        0% {
          left: 150%;
        }
        100% {
          left: 4%;
        }
      }
    }

    #TongZhi:hover {
      animation-play-state: paused;
    }
不过这个paused没生效就是了 暂时也没搞清楚原因