Как добавить переход в класс переключения JavaScript

Question

Как добавить переход в класс переключения JavaScript

0

Я делал класс переключения в JavaScript, в котором у меня есть div, который переключает его класс при наведении мыши. Один из классов div имеет цветной фон, а другой - изображение. Проблема в том, что изображение приходит мгновенно и не проходит плавно

Мой код css:

.container{
}

.first{
    height: 100%;
    width: 33%;
    position: absolute;
    background-color: #ecf0f1;
    top: 0px;
    left: 0px;
    background-color: none;
    -webkit-transition: all 0.5s ease-in-out;
}
.sec{
    height: 100%;
    width: 33%;
    position: absolute;
    background-color: #ecf0f1;
    top: 0px;
    left: 0px;
    z-index: 5;
    background: url(1.jpg);
    background-color: none;
    -webkit-transition: all 0.5s ease-in-out;
}

Мой код HTML:

<div id="container" class="first"><span>HELOO</span>
</div>

и, наконец, мой JavaScript:

this.classList.toggle('first');
        this.classList.toggle('sec');
        document.getElementById('#container').style.WebkitTransition = 'all 0.5s';
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseout', a )
    document.getElementById('#container').style.WebkitTransition = 'all 0.5s';

user2906766 30 нояб. 2013, в 16:34

Источник

0

Почему бы вам не использовать чистый CSS для достижения этого. Я думаю, что это намного проще.
Tom Chung 30 нояб. 2013, в 15:02
0

я не думаю, что есть какой-либо чистый способ добавить переход между изображениями, если есть, то мне бы это понравилось, потому что я сильнее в CSS, чем мой JavaScript
user2906766 30 нояб. 2013, в 15:06
0

Вы должны прочитать ответ Мохсена.
Tom Chung 30 нояб. 2013, в 15:10
0

Какой браузер вы используете? -webkit-transition просто запустите на Chrome.
Ringo 30 нояб. 2013, в 15:18
0

Это не главная проблема.
Tom Chung 30 нояб. 2013, в 15:36

Показать ещё 3 комментария

Теги:

javascript

html

css

transition

toggle

2 ответа

Ещё вопросы

Почему бы вам не использовать чистый CSS для достижения этого. Я думаю, что это намного проще.
я не думаю, что есть какой-либо чистый способ добавить переход между изображениями, если есть, то мне бы это понравилось, потому что я сильнее в CSS, чем мой JavaScript
Вы должны прочитать ответ Мохсена.
Какой браузер вы используете? -webkit-transition просто запустите на Chrome.

Tom Chung · Answer 1 · 2013-11-30T12-30-00.000Z

Просто для обучения, если вы настаиваете на использовании javascript для переключения класса.

Проверьте это на http://jsfiddle.net/qtpCS/

Использование :after техники.

Много работы, чтобы сделать с JavaScript. Очевидно, что чистый CSS лучше.

Mohsen Safari · Answer 2 · 2013-11-30T12-11-00.000Z

вы не можете установить эффект перехода на фоновое изображение, но есть способ, которым вы можете имитировать это. посмотрите на этот код:

jsFiddle

HTML

<div>
    <span>HELOO</span>
</div>

CSS

div{
    width:200px;
    height:200px;
    background:url(http://lorempixel.com/200/200);
    position:relative;
}
span{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#ddd;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}
span:hover{
    background-color:transparent;
}