angular--setInterval() 方法实现淡入淡出

最新推荐文章于 2022-10-19 15:43:10 发布

邪人君子

最新推荐文章于 2022-10-19 15:43:10 发布

阅读量828

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic1

本文链接：https://blog.youkuaiyun.com/qq_27127385/article/details/95588152

ionic1 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Angular应用中使用setInterval()方法来创建动态的淡入淡出效果，通过定时改变元素的透明度，实现平滑的动画过渡。

$scope.mTouch=function(c){
  $scope.showMiddle=true;
  $scope.hint=c;
  $scope.testc=c;
  var timer1=null;
  var timer2=null;
  var alpha=0;//透明度默认0
  var speed=5;
  var oDiv=document.getElementById("div1");
  clearInterval(timer1);
  clearInterval(timer2);
  oDiv.style.opacity=0;

  // 显示字母
  timer1=setInterval(function(){
      if(alpha<100){
          console.log('ccc');
          alpha+=speed;
          oDiv.style.filter="alpha(opacity:"+alpha+")";
          oDiv.style.opacity=alpha/100;
      }else if(alpha===100){
          console.log('aaa');
          clearInterval(timer1);
          $timeout(function(){
              timer2=setInterval(function(){
                  if(alpha>0){
                      speed=5;
                      console.log('ddd');
                      alpha-=speed;
                      oDiv.style.filter="alpha(opacity:"+alpha+")";
                      oDiv.style.opacity=alpha/100;
                  }else if(alpha<=0){
                      console.log('bbb');
                      $scope.showMiddle=false;
                      clearInterval(timer2);
                  }
              },30);
          },100);

      }
  },30);
  }

 <div style="
    position: fixed;
    left: 35%;
    top: 32%;
    width: 95px;
    height: 70px;
    background: rgb(221, 221, 221);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    color: rgb(136, 136, 136);
    opacity: 0;
    border-radius: 10px;
" id="div1" ng-show="showMiddle">
       <!--ng-show="showMiddle">-->
    {{hint}}
  </div>