после перехода webkit "скрыть" (отображение: нет) div - PullRequest
Новая
       17

после перехода webkit "скрыть" (отображение: нет) div

0 голосов
/ 29 марта 2012

У меня есть что-то вроде этого: 

 <style>
     #submenu {
      background-color: #eee;
      height:200px;
  width:400px;
  opacity: 1;
      -webkit-transition: all 1s ease-in-out;
     }
    .doSomething {
      background-color: #fc3;
  -webkit-transform: rotate(360deg);
  visibility:collapse;
     } 
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>


<body>
   <div id="submenu">`enter code here`
      <div style="background-color:black;width:50;height:50"></div>
   </div>
   <div style="background-color:yellow;height:250"></div>
   <script type="text/javascript">
    $(function(){
        $('#submenu').addClass('doSomething');
    });
</script>
</body>

Проблема в том, что когда первый div заканчивается анимацией, я хочу спрятать его и div, который находится ниже (желтый), чтобы занять его место. Я попытался поставить отображение свойства: ничего, кроме анимации, не будет работать.

Любая помощь очень ценится.

1 Ответ

1 голос
/ 02 апреля 2012

Поскольку ваш код уже привязан к webkit, возможно, вы можете использовать событие webkitTransitionEnd, чтобы узнать, когда заканчивается анимация. В обработчике этого события вы можете скрыть первый div и отобразить второй. Я написал быстрый jsFiddle , чтобы продемонстрировать это.

...