Sign in to follow this  
oke11o

Проблема с transition opacity

Recommended Posts

Здравствуйте.

Верстаю такую страницу

Хочу сделать красивое появление и затухание при помощи transition для иконки у блока раскрывающихся новостей. http://prntscr.com/3lqfvi

Имею такой css:

          i {            opacity: 0;            -webkit-transition: opacity @durationStd ease-in-out;            -moz-transition: opacity @durationStd ease-in-out;            -ms-transition: opacity @durationStd ease-in-out;            -o-transition: opacity @durationStd ease-in-out;            transition: opacity @durationStd ease-in-out;          }

И появление происходит как надо (плавно). Но вот при закрытие затухания не происходит, а просто изменяется свойство и элемент мигом исчезает.

 

Подскажите в чем может быть проблема.

Share this post


Link to post
Share on other sites

Основные свойства нужно писать элементу, анимация это изменение визуального состояния, то есть одно состояние меняется на другое, когда происходит какие то факторы. В вашем случае элемент существует при одном состоянии, а в другом его нету.

нужно так:

.news-row .news-list .item .news-item-body h3 i {opacity: 0;-webkit-transition: opacity .2s ease-in-out;-moz-transition: opacity .2s ease-in-out;-ms-transition: opacity .2s ease-in-out;-o-transition: opacity .2s ease-in-out;transition: opacity 1s ease-in-out;display: inline-block;background: url(../images/ivv.png) no-repeat 0 0;width: 20px;height: 20px;margin-top: -11px;margin-left: 10px;margin-bottom: -5px;}
.news-row .news-list .item.active .news-item-body h3 i {opacity: 1;}

Свойства проверьте, я для отладки могла изменить какие то.

Edited by amelice

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Неугомонный
      Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
    • By Govt_sm80
      Привет всем.Не могу поменять размер иконок с сайта https://fontawesome.com/icons/key?style=solid  и не получается сделать такие разделы как на картинке, может кто-то занет как это сделать?      вот ссылка на код    http://jsfiddle.net/kcd86y01/1/     и они еще должны выезжать  анимацией
    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
  • Member Statistics

    46,502
    Total Members
    3,128
    Most Online
    JamesAPatel
    Newest Member
    JamesAPatel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.