Установить элемент для отображения и расширения с помощью переходов CSS

Question

Я создаю что-то простое сегодня, но оно не ведет себя так, как я понимаю. В сущности, я хочу, чтобы сам дисплей элементов отображался и расширялся от узкой ширины до более широкой, когда нажимается кнопка.

Конечно, существует миллион способов сделать это, но я пытаюсь сделать это с помощью простого перехода CSS. То, что у меня есть элемент установлен для отображения: ни один, а затем добавить класс, который изменяет его на дисплей: блок и имеет переход к большей ширине примерно так:

<p class="cl">Click Here</p> 
<div class="block"></div> 

$(document).ready(function() { 
    $('.cl').on("click", function() { 
    $('.block').addClass("widen"); 
    }); 
}); 

.block { 
    background-color: red; 
    display: none; 
    width: 200px; 
    height: 200px; 
} 

.widen { 
    display: block; 
    background-color: blue; 
    transition: width 2s; 
    width: 400px; 
} 

JS Fiddle Here

Это приводит к тому div для отображения, но он появляется на полной ширине, когда мне нужно, чтобы он появился, а затем занять две секунды, чтобы распространить его на всю ширину.

Как вы можете сказать, я все еще новичок в переходах. Как я должен это делать, и чего мне не хватает?

Answer 1

CSS не может оживить изменение между display: none и display: block, а также любые другие изменения, связанные с ними.

Чтобы обойти это, необходимо отделить процесс в 2 этапа:

1. дисплей элемента.
2. вызвать анимацию.

$(document).ready(function() { 
 
    $('.cl').on("click", function() { 
 
    var $block = $('.block') 
 
    $block.show(); 
 
    
 
    // wait for the next frame before applying the animation 
 
    requestAnimationFrame(function() { 
 
     $block.addClass("widen"); 
 
    }); 
 
    }); 
 
});

.block { 
 
    background-color: red; 
 
    display: none; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.widen { 
 
    background-color: blue; 
 
    transition: all 2s; /** changed transition to all to animation the color as well **/ 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="cl">Click Here</p> 
 
<div class="block"></div>

Answer 2

Смотрите, если эта помощь: https://jsfiddle.net/j8zuc40y/4/

$(document).ready(function() { 
 
    $('.cl').on("click", function() { 
 
    $('.block').fadeIn(400); 
 
    setTimeout(function() { 
 
     $('.block').addClass('widen') 
 
    }, 2000); 
 
    }); 
 
});

.block { 
 
    background-color: red; 
 
    display: none; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.widen { 
 
    background-color: blue; 
 
    transition: width 2s; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p class="cl">Click</p> 
 

 
<div class="block"></div>